Vuex共享状态

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)