一、Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。
要点:
- vue官方搭配,专属使用 (类似于:vue-router),有专门的调试工具
- 集中式管理数据状态方案 (操作更简洁)
data() { return { 数据, 状态 }}
- 数据变化是可预测的 (响应式)
二、Vuex-在Vue项目使用Vuex
- 情况1:在老项目中使用。 先额外安装vuex包,然后在配置。
- 情况2:在新项目中使用。 在配置vue-cli中创建项目时,就可以直接选中vuex项,这样就不用做任何配置了(脚手架会自动帮我们完成的)。具体如下图示:
1.2 安装
由于VueX
是在学习VueCli
后进行的,所以在下文出现的项目的目录请参照VueCli 2.x
构建的目录。
以下步骤的前提是你已经完成了Vue项目构建,并且已转至该项目的文件目录下。
-
Npm安装Vuex
-
这里只说明第1种情况。在旧项目中使用vuex
假设之前已经有一个vue项目了,其中并没有使用vuex,现在我们来用一下。
注意,这里省略用vue脚手架创建项目的过程。
整体步骤:
1安装。它是一个独立的包,需要先安装。
2配置
a创建Vuex.store实例
b向Vue实例注入store
3使用。在组件中使用store
安装包:进入项目目录,安装包
npm install [email protected]
开发依赖 : npm i xxxx --save-dev ; npm i xxxx -D ;
生产依赖: npm i xxxx --save ; npm i xxxx -S; npm i xxxx
1.3.1实例化store
与router一样,当我们在项目中使用vuex之后,为了方便代码维护,我们一般需要做特殊的目录调整,约定的结构如下:
在store/index.js 中放置具体的代码,具体如下:
1.3.2 向Vue实例注入store
在src/main.js中:
- 导入store
- 并注入Vue实例
在组件中使用store
在任意组件中,通过this.$store.state
来获取公共数据。
1.3.3 在组件中使用Vuex
例如在App.vue中,我们要将state中定义的name拿来在h1标签中显示
<template>
<div id='app'>
name:
<h1>{
{ $store.state.name }}</h1>
</div>
</template>
或者要在组件方法中使用
...,
methods:{
add(){
console.log(this.$store.state.name)
}
},
...
注意,请不要在此处更改state
中的状态的值.
1.4 安装Vue开发工具VueDevtools
在Vue项目开发中,需要监控项目中得各种值,为了提高效率,Vue提供了一款浏览器扩展——VueDevtools。