vueX学习日记
Evernote Export
目录:
1.![](vueX_files/Image.png)
![](vueX_files/Image.png)
![](https://images2018.cnblogs.com/blog/1265522/201807/1265522-20180711092450988-128664828.png)
入口文件:
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
模块
![](https://images2018.cnblogs.com/blog/1265522/201807/1265522-20180711092748014-601628576.png)
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
}
在模块模式中使用辅助函数,
第一个参数加上模块名
![](https://images2018.cnblogs.com/blog/1265522/201807/1265522-20180711092027197-540849774.png)
在模块模式中使用调用
第一个参数加上模块名
![](https://images2018.cnblogs.com/blog/1265522/201807/1265522-20180711092202487-2133125744.png)
数据流向
![](https://images2018.cnblogs.com/blog/1265522/201807/1265522-20180711092329697-926602576.png)