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.messagemutations.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 })像这样 具体功能就可以细分下去了