概念:Vuex 是 Vue 配套的公共数据管理工具,它可以把一些共享的数据保存到 vuex 中, 方便整个程序中的任何组件直接获取或修改我们的公共数据。
直白的来说,Vuex其实就是对项目中多个组件的共享状态进行集中式的管理。
状态管理包含以下几部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
状态图解:
Vuex的使用:
- 在项目中安装 vuex
cnpm i vuex -D
- 在 main.js 文件中,导入,并注册
import Vuex from 'vuex';
Vue.use(Vuex);
- 使用的时候需要初始化一个 Vuex.Store 实例对象,具体过程如下:
const store = new Vuex.Store({
state: { //相当于Vue实例中的data 来存放store中的数据
//state中的值只能通过 mutations 提供的方法来操作对应的数据,
count: 0
},
/*
注意:mutations 中方法的参数只能传递两个参数
第一个参数:是 state 状态
第二个参数:是通过 commit 来调用方法时提交过来的参数,(可以是对象、数组等)
*/
mutations: { //这里来操作state中的数据 相当于Vue实例中的methods
increment (state) {
state.count++
}
subtract(state,obj){
state.count -= (obj.c + obj.d);
}
},
//使用getters来包装数据
getters: {
/*
注意:此处的 getters 只负责对外提供数据,不负责修改数据,若要修改state中的数据,需要在mutations中修改
使用方法:this.$store.getters.optCount
getters 和 过滤器 filter 类似,都没有修改数据,只是把原数据做了包装,提供给了调用者
还可以通过 mapGetters 来获取
在对应的组件页面导入 import {mapGetters} from 'Vuex';
在计算属性computed中实时监听 ...mapGetters(['***','***']);
使用插值表达式直接来拿使用即可
*/
optCount: function(state){
return "当前最新的count值:" + state.count;
}
}
})
//需要在Vue实例中挂载
Var vm = new Vue({
store:store
});
/*
可以访问状态对象store.state,并使用以下store.commit方法触发状态更改:
例如:在别的文件中使用此处的全局的数据或方法
this.$store.state.count 或 this.$store.commit("方法名称");
这种方法调用格式,和 this.$emit("父组件中的方法名称“”); 类似
*/
-
总结:
1)state中的数据,不能直接修改,必须通过 mutations
2)如果组件想要直接从 state 上获取数据,需要 this. store.commit(‘方法的名称’,唯一的参数);
4)如果 store 中 state 上的数据,在对外提供的时候,需要做一层包装,需要使用 getters ,使用 this.$store.getters.***图片详解:
文件结构: