Vuex 常规用法

Posted 2021-05-07 linjunfu

背景

很多时候我们已经熟悉了框架的运用，但是有时候就是忘了怎么用

所以这里想记下大部分的框架使用方法，方便使用的时候拷贝

一、安装

npm 方式

npm install vuex --save

yarn 方式

yarn add vuex

二、vuex 用法

1、引入以及安装

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {}
})
new Vue({
    // 把 store 提供给 store 选项，
    // Vue 最初实例化的时候将 store 的实例注入到所有的子组件，意味着子组件可以使用 this.$store 调用 store 实例
    store 
})

2、正常使用

（1）、state

（2）、getters

（3）、mutations

（4）、actions

const store = new Vuex.Store({
    state: {
        count: 0,
        todos: [
            { id: 1, done: true },
            { id: 2, done: false }
        ]
    },
    // 是 state 的 computed
    getters: {
        doneTodos: (state, getters) => {
            return state.todos.filter(todo => todo.done)
        },
        doneTodoCount: (state, getters) => {
            return getters.doneTodos.length
        }
    },
    // mutation 必须是同步函数，以便追踪状态（编写规范如此，非强制）
    // 可以使用 state.obj = { ...state.obj, newProp: 1 } 进行值的替换（新对象替换旧对象，支持增加新属性）
    mutations: {      
        mutationChangeState__increment(state, payload) {
            // payload： 调用该方法时，传递进来的参数
            state.count++
        }
    },
    // mutation 里不允许的异步操作，可以放在 action 里面
    actions: {
        // 1、普通操作
        actionCallMutation__mutationChangeState__increment(context) {
            // context 是与 store 实例具有相同方法和属性的对象
            context.commit('mutationChangeState__increment')
        },
        // 解构 context 使用
        actionCallMutation__mutationChangeState__increment({ state, commit, dispatch, getters }) {
            commit('mutationChangeState__increment')
        },

        // 2、Promise 应用
        // 异步操作转同步 Promise 1
        actionCallMutation__mutationChangeState__increment({ state, commit, dispatch, getters }) {
            return new Promise((resolve, reject) => {
                // ...
                // resolve()
                // reject()
            })
        },
        // 异步操作转同步 Promise 2
        actionCallMutation__mutationChangeState__increment2({ state, commit, dispatch, getters }) {
            dispatch('actionCallMutation__mutationChangeState__increment').then(() => {
                // ...
            })
        },

        // 3、async/await 应用
        // 异步操作转同步 async 1
        async actionCallMutation__mutationChangeState__increment({ state, commit, dispatch, getters }) {
            await getData()
        },
        // 异步操作转同步 async 2
        async actionCallMutation__mutationChangeState__increment({ state, commit, dispatch, getters }) {
            await dispatch('actionCallMutation__mutationChangeState__increment')
            // dosomething...
        },
    }
})
export default store

3、存在子模块

3.1、modulesA

// 注意！注意！注意！
// modulesA 中的 
// Astate，Agetters，Amutations，Aactions 应该为
// state，getters，mutations，actions
// 我这里是为了区分子模块和根模块才这么命名
const modulesA = {
    // 1、在 namespaced 为 false 的情况下：
    // 默认情况下，模块内部的 action、mutation、getter 
    // 分别和根模块的 action、mutation、getter 共享一个命名空间
    // 即 Vuex 实例的 _getters、_mutations、_actions
    // store: {
    //     _getters: {},
    //     _mutations: {},
    //     _actions: {}
    // }
    
    // （1）、如果子模块的 getters 定义了和根模块相同的 getters，将会报错提示定义了相同的变量名
    // store: {
    //     _getters: {
    //         getter1: 0,
    //         getter2: {},
    //     }
    // }

    // （2）、如果子模块的 mutation 定义了和根模块相同的的 mutation，Vue 将该同名 mutation 转换成以该 mutation 名称为变量名的数组，并存储这两个 mutation 函数
    // 先执行根模块的 mutation ，然后执行子模块的 mutation
    // store: {
    //     _mutation: {
    //         mutationRepeatName: [function(){}, function(){}],
    //         otherMutation: function(){}
    //     }
    // }


    // 2、在 namespaced 为 true 的情况下，不存在覆盖根模块的情况
    // （1）、如果子模块的 getters 定义了和根模块相同的 getters，不会报错，会加入模块名作为变量名前缀
    // store: {
    //     _getters: {
    //         a/getter1: 0,
    //         getter1: {},
    //     }
    // }

    // （2）、如果子模块的 mutation 定义了和根模块相同的的 mutation，会加入模块名作为 mutation 名前缀
    // store: {
    //     _mutation: {
    //         a/mutationRepeatName: function(){},
    //         mutationRepeatName: function(){}
    //     }
    // }
    
    // 3、启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit
    // 所以 namespaced 的改变，不影响模块代码
    namespaced: false,

    // 子模块的 Astate 直接附加到根模块的 state
    // 在根模块的 state 中， 以子模块名为 key，作为 state 的一个属性存在
    // state: { 
    //     a: { // 这里即子模块的 Astate

    //     } 
    // }
    Astate: {
        count: 0,
        todos: [
            { id: 1, done: true },
            { id: 2, done: false }
        ]
    },
    Agetters: {
        AdoneTodos: (Astate, Agetters, rootState, rootGetters) => {
            // rootState 为根模块的 state
            // rootGetters 为根模块的 rootGetters
            return Astate.todos.filter(todo => todo.done)
        },
    },
    Amuattions: {
        mutationChangeState__increment(Astate, payload) {
            // payload： 调用该方法时，传递进来的参数
            Astate.count++
        }
    },
    Aactions: {
        actionCallMutation__mutationChangeState__increment({ Astate, Acommit, Adispatch, Agetters, rootState, rootGetters }) {
            // rootState 为根模块的 state
            Acommit('mutationChangeState__increment')

            // 调用时，传递第三个参数{ root: true }， 可以访问根模块的 actions: someMutation
            Acommit('someMutation', null, { root: true })
        },
        someRootAction: {
            root: true, // 设置 root 属性为 true，可以将 someRootAction 注册在根模块
            handler (namespacedContext, payload) { ... } // -> 'someRootAction'
        }
    }
}

3.2、使用子模块

const store = new Vuex.Store({
    modules: {
        a: modulesA
    },
    state: {},
    // 是 state 的 computed
    getters: {},
    // mutation 必须是同步函数，以便追踪状态（编写规范如此，非强制）
    // 可以使用 state.obj = { ...state.obj, newProp: 1 } 进行值的替换（新对象替换旧对象，支持增加新属性）
    mutations: {},
    // mutation 里不允许的异步操作，可以放在 action 里面
    actions: {}
})
export default store

三、组件内常用操作

1、在组件中使用实例调用

// 调用 modulesA
// 1、调用 state
this.$store.state.a.todos
// 2、调用 getter
this.$store.getters.AdoneTodos // namespaced: false
this.$store.getters['a/AdoneTodos'] // namespaced: true
// 3、调用 mutation
this.$store.commit('AmutationChangeState__increment') // namespaced: false
this.$store.commit('a/AmutationChangeState__increment') // namespaced: true
// 4、调用 action
this.$store.dispatch('AmutationChangeState__increment') // namespaced: false
this.$store.dispatch('a/AmutationChangeState__increment') // namespaced: true


// state
this.$store.state['属性key']
// getters
this.$store.getters['属性key']
// 调用 mutation
this.$store.commit('mutationChangeState__increment', payload)
this.$store.commit({ // 对象风格调用，整个对象都将作为 payload 传递给 mutation 方法
    type: 'mutationChangeState__increment',
    payload1: '',
    payload2: ''
})
// 调用 action
this.$store.dispatch('actionCallMutation__mutationChangeState__increment')
this.$store.dispatch({ // 对象风格调用，整个对象都将作为 payload 传递给 dispatch 方法
    type: 'actionCallMutation__mutationChangeState__increment',
    payload1: '',
    payload2: ''
})

2、在组件中使用辅助函数调用

// 辅助函数
import { mapState, mapGetters, mapMutations, mapActions, createNamespacedHelpers  } from 'vuex'
// or
const { mapState, mapGetters, mapMutations, mapActions, createNamespacedHelpers } = createNamespacedHelpers('子命名空间')
export default {
    created() {
        // 使用
        // state
        console.log(this.stateName1, this.stateName2)
        // getter
        console.log(this.getterName1, this.getterName2)

        // mutation
        this.mutationName1()
        this.mutationName2()
        // action
        this.actionName1()
        this.actionName2()
    },
    computed: {
        // mapState
        // 数组用法
        ...mapState(['stateName1', 'stateName2']),
        // 对象用法
        ...mapState({
            stateName3: state => state.stateName3,
            stateName4_alias: state => state.stateName4,
            stateName5_alias: 'stateName5', // 此处 'stateName5'(注意是字符串) 等于 state => state.stateName5
            stateName6_resolve: state => { // 获取经过处理的值
                return state.count + this.stateName1
            }
        }),

        // mapGetters
        // 数组用法
        ...mapGetters(['getterName1', 'getterName2'])
        // 对象用法
        ...mapGetters({
            getterName3_alias: 'getterName3'
        })
    },
    methods: {
        // mapMutations
        // 数组用法
        ...mapMutations(['mutationName1', 'mutationName2']),
        // 对象用法
        ...mapMutations({
            mutationName3_alias: 'mutationName3'
        }),

        // mapActions
        // 数组用法
        ...mapActions(['actionName1', 'actionName2']),
        // 对象用法
        ...mapActions({
            actionName3_alias: 'actionName3'
        }),
    }
}