Vuex的使用

参考文章：https://www.jianshu.com/p/83d5677b0928   

vuex的比较全的文章使用

1、getters和state的两种方式

(1)访问state的name和getter的age值： this.$store.state.name , this.$store.getters.age

(2) 更简单的方式：

import{ mapGetters,  mapStates}from'vuex'

computed:{

...mapGetters(['todoList'])}, // 这里写着引用导出

...mapStates(['todoList'])}

},

methods:{

    getInfo(){

     console.log(this.todoList)  // 这里进行上面就可以使用了

    }

}

2、mutation和action的访问方式：

import{ mapMutations,  mapActions}from'vuex'

created(){

    this.setTodoList(list)  // 这里直接引用了下面的方法

   this. SET_TODO_LIST(list) // 这里数组方式引用方法

},

methods: {

    ...mapMutations({setTodoList:'SET_TODO_LIST'})

    或者   ...mapMutations(['SET_TODO_LIST'])

}

3： modules模块  进行使用的方式跟上面有点区别。

（1）: 在modules内部使用，一样。

modules模块user age是在模块modelus的使用

（2）在modules使用在根store中的值，rootState

第三个参数rootState

(3)通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名.

namespaced: true