vuex store使用总结 2 ( 功能化的使用 )
已经介绍了 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
})
像这样 具体功能就可以细分下去了
另外两篇: