1.首先给大家简单说明一下vuex以及用它主要来做什么:
vuex是专门为vue.js设置的状态管理库,可以使用vuex处理数据实现组件之间的数据共享。换句话说就是,vuex是在全局最高的环境下保存的数据,所有的组件都可以访问到。
2.代码演示
1.安装
cnpm install vuex --save
2.全局导入main.js文件中使用
import Vuex from 'vuex'
非常重要的一步
Vue.use(Vuex)
3.在main.js中实例化一个仓库
const store = new Vuex.Store({
state表示驱动应用的数据源 相当于data
state对象中的count是可以根据自己的需求修改的
state: {
count: 0
},
相当于methods 对外暴露修改的方法
mutations: {
increment函数名是可以修改的 state是默认的第一个参数,后面也可以加第二个,第三个..
increment (state) {
state.count++
}
}
})
4.如何访问仓库中的数据
1.全局中访问main.js
store.state.count
2.组件内访问
this.$store.state.count
5.提交载荷 相当于为修改数据传参
store.commit('incremet',后面这里参数可以是一个对象{ },也可以是一个值{
在这里通过commit来修改数据 动态增加数据
})
6.如果你需要同步更新动态添加的数据, 一定要遵循vue的响应规则
在mutation中对应的函数里
Vue.set( obj对象, 属性名, 属性值)
7.最后一步 将store挂载到实例中
参考文档:https://vuex.vuejs.org/zh/guide