Vuex使用记录 1.在Vue2.x中使用 import Vuex from ‘vuex’ /* 引入Vuex / Vue.use(Vuex) / 安装插件 / / 实例化Vuex */ const store = new Vuex.Store({ state: {
count: 0
}, mutations: {
increment (state) {
state.count++
}
} }) /* 挂载到所有组件 */ new Vue({ el: ‘#app’, store: store, })
2.在Vue3.x中使用 import { createApp } from ‘vue’ import { createStore } from ‘vuex’ /* 创建一个新的 store 实例 */ const store = createStore({ state () {
return {
count: 0
}
}, mutations: {
increment (state) {
state.count++
}
} }) const app = createApp({ /* 根组件 / }) / 将 store 实例作为插件安装 */ app.use(store)
3.辅助函数 mapState、mapGetters、mapActions、mapMutations
…mapActions([
'some/nested/module/foo', /* -> this['some/nested/module/foo']()*/
'some/nested/module/bar' /*-> this['some/nested/module/bar']()*/
]) /* 可以在第一个参数中传递模块名，简写 */ …mapActions(‘some/nested/module’, [
'foo', /* -> this.foo() */
'bar' /* -> this.bar()*/
])
4.学习
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。 Vuex的对象可以用过use注入vue应用，成为所有组件的store属性。也可以单独引入这个对象，单独使用。 Vuex的所有方法中，this指向Vuex对象。
5.state（状态/数据） computed: mapState([ /映射 this.count 为 store.state.count/ ‘count’ ])
6.getter（state的计算属性？） getters: {
doneTodos: (state) => {
return state.todos.filter(todo => todo.done)
}
}
7.mutation（事件，由commit触发） store.commit(‘increment’) …mapMutations({
add: 'increment' /*将 `this.add()` 映射为 `this.$store.commit('increment')`*/
})
8.action（异步处理状态，由dispatch触发） actions: { increment ({ commit }) {
commit('increment')
} } /* 参数解构 */ actions: {
checkout ({ commit, state }, products) {
}
}
9.模块分割 Module const moduleA = { state: () => ({ … }), mutations: { … }, actions: { … }, getters: { … } } const moduleB = { state: () => ({ … }), mutations: { … }, actions: { … } } const store = createStore({ modules: {
a: moduleA,
b: moduleB
} }) store.state.a /* -> moduleA 的状态 / store.state.b / -> moduleB 的状态 */
10.项目结构说明 11.组合式API使用 this.$store 12.订阅 订阅 store 的 mutation。handler 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数
订阅 store 的 action。handler 会在每个 action 分发的时候调用并接收 action 描述和当前的 store 的 state 这两个参数。 subscribe 方法将返回一个 unsubscribe 函数，当不再需要订阅时，应调用该函数。
