vuex的使用笔记

1.安装

npm安装

npm install vuex@next --save

yarn安装

yarn add vuex@next --save

2.基本结构

import Vuex from 'vuex'const store = createStore({
//状态：相当于vue中的data（）
state() {return {name: 0,code:"",todos: [{ id: 1, text: '...', done: true },{ id: 2, text: '...', done: false }]}},getters: {doneTodos (state) {return state.todos.filter(todo => todo.done)}},//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation//mutation 必须同步执行mutations: {saveName(state,name){state.name= name;},saveCode(state,code){state.code= code;},},//Action 类似于 mutation//Action 提交的是 mutation，而不是直接变更状态//Action 可以包含任意异步操作actions: {//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象//Action 通过 store.dispatch 方法触发increment (context) {context.commit('increment')}},
})export default store 

3.多模块的结构

import Vuex from 'vuex'
const module1 = {
//开启命名空间namespaced: true,state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
const module2 = {
//开启命名空间namespaced: true,state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
const module3 = {
//开启命名空间namespaced: true,state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}
const store = createStore({
modules: {module1: module1,module2: module2,module3: module3,}
})
export default store 

main.js 注册store

// 引入仓库
import store from 'path';new Vue({el: '#app',store,render: h => h(App)
});

4.使用方法

1.获取状态

//方法1
this.$store.state.状态名
//方法2 多模块的状态名
this.$store.state.模块名.状态名
//方法3 单模块映射的方式，在vue中的计算属性中混入
computed：{
...mapState({'状态名1','状态名2',...
})
}
//使用‘this.状态名即可获取’
//多模块映射的方式
computed：{
...mapState({module1: state => state.some.nested.module.module1,module2: state => state.some.nested.module.module2})
}

2.调用getter

//直接使用
this.$store.getters.doneTodosCount
//映射的方式
computed: {// 使用对象展开运算符将 getter 混入 computed 对象中...mapGetters(['doneTodosCount','anotherGetter',// ...])}

3. 调用mutations

//方法1 使用this.$store
//1.b不带参数
this.$store.commit('mutations的方法名')
//2.带参数
this.$store.commit('mutations的方法名',parmas)
//3.多模块的调用方式
this.$store.commit('模块名/调用模块的mutations的方法名',parmas)
//4.映射的方式 在methods中使用
methods: {...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`// `mapMutations` 也支持载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`]),}

4.调用Action

//通过this.$store.dispatch 方法触发
//映射的方式 在methods中使用import { mapActions } from 'vuex'methods: {...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`// `mapActions` 也支持载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`]),...mapActions({add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`})}