Vuex 实践操作

Vuex 实践操作

1.在方法（函数）内部

this.$store.commit('xxx', false)  //xxx与store文件夹下index.js中mutations内部的方法名一致 
//false 为给状态量的值，可以是false, true, 或者其他变量

2在 store 文件夹下 index.js 中的 Vuex.Store 内部

//在 mutations 中设置方法
mutations: {
        xxx(state, 传入的参数xx) {    //xxx为方法名 为第一步自定义的方法名
            state.xx= 传入的参数xx //xx与传入的参数xx名称一致  传入的参数名字随意，最好和方法名类似但有区别方便阅读
        }    
}
 //在 state 中设置默认值
state: {
        xx: false,//xx即为传入的参数，默认值可以是布尔值，number等等  
}

3.在 computed 计算属性内部

computed: {
     xx() {      //方法名xx 同第二步 state.xx的xx名称 一致 方便阅读
      return this.$store.state.xx //xx 同第二步state.xx的xx名称一致 可以直接使用 方法中this.xxxx dom结构中直接使用xxxx
    }
 }

4.修改状态值

this.$store.commit('xxx', true)  // true 为重新给 xxx方法内 传入的参数xx 的新值