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

                                       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 })

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