第一次接触 vuex ...

学习 vuex 时写了很多注释舍不得删，遂保存一下~
声明 root store，加载其他子模块，例如 user, task, report：

/***********************************************/
/* src/store/index.ts
/***********************************************/
import Vue from "vue"
import Vuex from "vuex"

import user from "./modules/user"
import task from "./modules/task"
import report from "./modules/report"

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        user,
        task,
        report
    }
})

user 子模块

/***********************************************/
/* src/store/modules/user.ts
/***********************************************/
import { Module } from "vuex/types"

// S: 泛型，当前模块的 state 接口
// R: 泛型，根模块的 state 接口
const user: Module<S, R> = {
    /*
    ** 给当前模块分配一个命名空间。当前模块中的 state 自动获得命名空间，即无论有没有
    ** 声明 namespaced: true。getters, mutations 和 actions 默认注册到全局空
    ** 间，即 store.getters.xxx 可以访问到任何一个没有声明 namespaced: true 的
    ** 子模块的 getters。注册到全局空间会使不同模块之间 key 的管理变得混乱。当声明了
    ** namespaced: true 后，getters, mutations 和 actions 会被注册到当前子模块
    ** 的局部命名空间，即只能通过 store.getters.user.xxx 访问。
    */
    namespaced: true,
    
    /*
    ** 模块的 state 默认使用子命名空间，即只能使用 store.state.user.xxx 访问。
    ** state 的接口由泛型 S 指定，为了在 typescript 中有更好的编程体验，建议为state
    ** 编写具体的接口类型。
    */
    state: {
        token: localStorage.getItem('login_token'),
        username: null,
        userid: null
    },
    
    /*
    ** 相当于计算属性，其值依赖于 state 的内容，state 既可以是本模块的 state， 即
    ** 局部的 state，也可以是全局的 state，即 root state，还可以是本模块的 getters
    ** 或者全局的 getters。因此一个属性方法可以接受四个参数。
    */
    getters: {
        someComputedGetter(state, getters?, rootState?, rootGetters?) {
            /*
            ** state：本模块定义的 state 的引用，例如 state.token；
            ** getters：本模块定义的 getters 的引用；
            ** rootState: 根模块的引用，即定义在 store/index.ts 中的 store；
            ** rootGetters：根模块中的 getters；
            ** 通过 rootState 和 rootGetters 可以访问到其他子模块中的 state
            ** 和 getters，从而方便地实现跨模块。
            */
        }
    },
    
    /*
    ** 操纵本模块 state 的同步方法
    */
    mutations: {
        someMutation(state, payload?: any) {
            /*
            ** state：本模块定义的 state 的引用
            ** payload：传给 mutation 的额外参数，传递多个参数时可以使用哈希
            */
        }
    },
    
    // 异步事务的处理
    actions: {
        // 因为有 namespaced: true，下面实际上声明了一个局部 action
        someLocalAction(context, payload?: any) {
            /*
            ** context 是一个对象，包含了:
            ** 1. 当前模块的 state, getters, mutations, actions
            ** 2. 根模块的 rootState, rootGetters, rootMutations, rootActions
            ** 3. 提交同步事务的方法 commit
            ** 4. 提交异步事务的方法 dispatch
            ** 可以按照需要进行解包，例如 someAction({mutations, commit})
            ** payload：传给 mutation 的额外参数，传递多个参数时可以使用哈希
            */
        },
        // 显式声明一个全局的 action，即可以通过 store.actions.someGlobalAction 访问
        someGlobalAction: {
            root: true,
            handler(namespacedContext, payload?: any) {
                // 这里的 namespacedContext 仍然是子模块的 context
            }
        }
    },
    
    // 继续声明子模块
    modules: {}
}

mutations 和 actions 的事务名使用常量，例如SOME_MUTATION_NAME

第一次接触 vuex ...

评论区