Vuex 共享状态采用
1.Vuex 的状态存储时响应式的 定义在store容器中的值发生改变后,那么相应的组件也会相应的得到高效更新
2.你不能直接改变 store 中的状态,改变store 中的状态 的唯一途径就是显示地提交(commit) mutation
export default new Vuex.Store({
//存储的是属性
state:{
},
//和计算属性一样,也有缓存
getters:{
},
//写的是方法
//在 mutations 必须是同步函数
mutations:{
increment(state,payload){
//第一个参数 state 代表 是 vuex 中存储的值
//第二个参数调用事件函数时,需要传递的形参
}
},
//actions 类似于 mutations
//actions 提交的是 mutation(commit) ,而不是直接更改状态
//actions 可以包含任意异步操作
actions:{
increment(content,payload){
//第一个参数 content 表示上下文对象
//第二个参数调用事件函数时,需要传递的形参
}
},
//模块
//里面可以写 state getters mutations actions
modules:{
},
// 严格模式
strict:true
})
使用
console.log(this.$store)
commit 是用来触发 mutation 中的方法
-----mutation 中的第一个参数 就是 定义的事件名 第二个参数传递的是实际参数
//this.$store.commit('increment',10)
//this.$store.commit('increment',{num:10,age:20})
dispatch 是用来触发 actions中的方法
//传参方式和 mutation 一样
this.$store.dispatch('increment',10)