Evernote Export
目录：
1.
入口文件：
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions' // 引入文件的所有导出项，并把他们放在别名为actions的对象中
import * as getters from './getters'
import app from './modules/app'
Vue.use(Vuex)
const store = new Vuex.Store({
strict: true, // process.env.NODE_ENV !== 'development', 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
actions,
getters,
modules: { //模块
app,
},
mutations: {
}
})
export default store
模块
import * as types from '../mutation-types'
// initial state
const state = {
userInfo: {
avatar: ''
}
}
// getters
const getters = {
userInfo: state => state.userInfo //此处的state为本模块的state,无法访问全局的state
}
// userInfo
const mutations = { //唯一能够改变
[types.UPDATE_USER_INFO] (state, {avatar}) {
state.userInfo.avatar = avatar
},
}
export default {
//将模块隔离，使用辅助函数时，第一个参数需表明模块名称...mapGetters('userInfo',[ 'userInfo' ])
namespaced
:
true
,
state
,
//
//someGetter (state, getters, rootState, rootGetters){}:隔离后的模块getters通过第三个参数访问全局数据
getters
,
//someAction ({ dispatch, commit, getters, rootGetters,rootState }){}:隔离后的模块通过第四,5个参数访问全局数据
//通过{root: true} 发放全局提交commit commit('someMutation', null, { root: true })
//通过以下方式注册全局acthions ：全局触发dispatch('someAction')
// someAction: {
// root: true,
// handler ({ dispatch, commit, getters, rootGetters }) { ... } // -> 'someAction'
// }
//模块化后通过dispatch('userInfo/changeUserInfo')；触发acthions
actions
,
mutations
}
在模块模式中使用辅助函数，
第一个参数加上模块名
在模块模式中使用调用
第一个参数加上模块名
数据流向
