vuex中state,getter,mutation,action,module的用法与理解

小鱼儿 2021-07-27 01:30 445阅读 0赞

一.  
State:\{  
count: 0  
\}  
保存着所有的全局变量  
组件中获取：

computed:{
        ...mapState({ //es6的对象展开运算符
            count: state => state.count //es6箭头函数
            'count' //如果名字与state中的名字一致，可这样简写
        })
    }

二.  
Getter： 对state中的数据派生出一些状态，例如对数据进行过滤。（可以认为是store中的计算属性），会对state中的变量进行过滤再保存，只要state中的变量发生了改变，它也会发生变化，不变化的时候，读的缓存。

getters: {
       doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        },
        doneTodosCount: (state, getters) => { //Getter 也可以接受其他 getter 作为第二个参数：
        return getters.doneTodos.length
      }
     }

在组件中的用法（mapGetters 辅助函数）：

computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount', //如果想改名称，可以用对象的方式doneCount: 'doneTodosCount'
          'anotherGetter',
          // ...
        ])
      }

三.  
Mutation：  
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。  
一条重要的原则就是要记住 mutation 必须是同步函数。

mutations: {
      increment (state, n) {
        state.count += n
      }
    }

methods: {
        ...mapMutations([
          'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    
          // `mapMutations` 也支持载荷：
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
        ]),
        ...mapMutations({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
      }

四.  
Action:  
Action 类似于 mutation, 不同点在于，Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作，mutation只能是同步。  
有点不同的是Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: { //action 异步请求到数据后，用mutations中的方法传参到函数中，在函数中去改变state中的变量。
        increment (context) {
          context.commit('increment')
        }
      }

最后，如果我们利用 \[async / await\]，我们可以如下组合 action：

actions: {
      async actionA ({ commit }) { //commit为触发mutations中的函数的方法，用到了es6的参数解构。
        commit('gotData', await getData())  
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成  actions中的方法通过dispatch（）触发
        commit('gotOtherData', await getOtherData())
      }
    }

五.  
Module： // 如下类似这样的模块，可以写很多，最后都引入到一个文件。分散管理。

import * as types from '../mutations-type' //变更为常量名，有利于项目的理解。如：export const SOME_MUTATION = 'someMutation'
    
    const state = {
        responseData: '', // 响应数据
        memoryKey: '' //内存地址的id
    }
    
    // getters
    const getters = {
        msgShow: state => state.msgShow,
        noDataShow: state => state.noDataShow
    }
    
    // actions
    const actions = {
        getDetailData(context, payload) {
            EMAjax.get({
                url: payload.url,
                data: payload.data,
                beforeSend: function() {
                    state.responseData = ''; // 数据请求前先初始化
                },
                success: function(response) {
                },
                error: function(err) {} {
            })
        },
        // 调用终端方法 将数据保存到终端内存中 并返回内存地址的id 有返回值 返回值int 
        terminalSaveString(context, payLoad) {
            context.commit(types.TERMINAL_SAVE_STRING, payLoad);
        },
    }
    
    // mutations
    const mutations = {
        [types.GET_DETAIL_DATA](state, { data }) { 
            if (data.records.length > 0) {
                state.responseData = data;
            } else {
                state.isShowMsg = true;
            }
        },
        // 调用终端方法 将数据保存到终端内存中 并返回内存地址的id 有返回值 返回值int 
        [types.TERMINAL_SAVE_STRING](context, payLoad) {
            state.memoryKey = EMTerminal.terminalInsertMemory(payLoad);
        },
    }
    
    export default {
        namespaced: true,   //namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
        state,
        getters,
        actions,
        mutations
    }

生成实例的时候 都放在Store的modules中  
export default new Vuex.Store(\{  
modules: \{  
globalInputBox,  
globalMenu,  
searchDetail,  
searchDetailAll,  
searchDetailQuota,  
searchDetailBlocks,  
searchDetailFunction,  
searchDetailSecurity,  
searchDetailSpecial,  
searchDetailNews,  
searchDetailNotice,  
searchDetailReports,  
searchDetailLaws  
\}  
\});