vuex store使用总结 2 ( 功能化的使用)

    xiaoxiao2022-07-02  112

                                           vuex store使用总结 2 ( 功能化的使用 )

    vuex store使用总结 1

    已经介绍了 vuex 的 一些基本的使用方式,但是仅仅停留在了 认识的层面,在实际生产过程中不可能 只有一个脚本记录 整个项目的 所以数据,接下里我们将 vuex store 中的数据进行优化 进行拆分

    我们在 store文件夹 中 分别创建  state.js actions.js   getters.js   mutations.js  这四个 js 文件 把 index.js(第一节中的代码)中的代码 分别拆分到 上面四个文件中

     

    state.js

    //设置属性 用来存储数据 export const = message: {} export const = localuser: {}

    actions.js

    //应用 mutation export const setUser = ({ commit }, data) => { commit('setLocalUser', data) }

    getters.js  

    //对应方法 用来获取属性的状态 export const getMessage = state => state.message

    mutations.js

    //更改属性的状态 export const = setMessage(state, data) => { state.message = data } //更改用户状态信息 export const = setLocalUser(state, data) => { if (data) { state.localUser = data } else { state.localUser = null } }

    index.js 就变成这样了

    import Vue from 'vue' import Vuex from 'vuex' import * as actions from './actions.js' import * as getters from './getters.js' import * as mutations from './mutations.js' import * as state from './state.js' Vue.use(Vuex) export const store = new Vuex.Store({ state, getters, mutations, actions })

    像这样 具体功能就可以细分下去了

    最新回复(0)