vuex一般在vue2项目中使用的较多，我们在项目较大的时候一般都是会选择去使用vuex来作为全局的状态管理机，话不多说，直接上结构代码
下面我贴出一个模块的代码，其余一样的
//user.js模块
const state = {...}
const getters = {...}
const mutations = {...}
const actions = {...}
export default {
namespaced: true,
state,
getters,
actions,
mutations,
}
另一种写法
//user.js模块
export default{
namespaced: true,//namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接
state:{...},
mutations: { ... },
actions: { ... },
getters: { ... }
}
namespaced: true的讲解
代表开启命名空间. 默认获取state里面的数据时，前面要加上模块名称；而mutations、actions、getters不用加模块名称，但是当加上命名空间之后，必须要加上相对应的模块名称。
如果没有开启命名空间，会发生什么？
this.$store.commit("uptNum"); //执行此方法时，user.js和track.js里面两个同名的uptNum方法都会执行**
然后在store下的index.js引入各个模块
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import auth from './modules/auth'
import track from './modules/track'
import trainDevice from './modules/train-device'
import trains from './modules/trains'
import faultType from './modules/fault-type'
import taskType from './modules/task-type'
import socket from './modules/socket'
import notification from './modules/notification'
import taskInfo from './modules/task-info'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
'train-device': trainDevice,
'fault-type': faultType,
'task-type': taskType,
'task-info': taskInfo,
auth,
user,
track,
socket,
trains,
notification,
}
})
最后记得在main.js里引入和挂载
import store from './store';
Vue.prototype.$store = store;//挂载在 Vue 实例上
onst app = new Vue({
store,
...App
})
app.$mount()
在页面的具体使用，此处只拿state和Action做列子，Getter和mutation和这两个类似
1.state
1.1 直接使用方式（不使用map辅助函数）
this.$store.state.模块属性
1.2 直接使用方式（使用map辅助函数）
辅助函数mapState
在公共数据中的语法（没有分模块的时候）
computed:{
...mapState(['xxx'])
...mapState({新名字:'xxx'})
}
1.2.1 直接通过属性来获取state中的数据
computed:{
...mapState(['count']) //映射成this.count
或者
...mapState({countAlias:'count'}) //映射成this.countAlias
}
1.2.2 通过函数形式来获取state中的数据
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count, //映射成this.count
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) { //映射成this.countPlusLocalState
return state.count + this.localCount
}
})
等价于
computed:{
...mapState({
// 箭头函数可使代码更简练
count: state => state.count, //映射成this.count
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) { //映射成this.countPlusLocalState
return state.count + this.localCount
}
})
}
1.3在分模块中进行使用
1.3.1 直接使用
this.$store.state.模块名.模块属性
如：
this.$store.state.user.name
1.3.2 mapState辅助函数
computed: {
...mapState('模块名', ['xxx']),
...mapState('模块名', {'新名字': 'xxx'})
}
2.getters
2.1 直接使用方式（不使用map辅助函数）
this.$store.getters.模块属性
2.2 直接使用方式（使用map辅助函数）
辅助函数mapGetters
在公共数据中的语法（没有分模块的时候）
computed:{
...mapGetters(['xxx'])
...mapGetters({新名字:'xxx'})
}
2.3在分模块中进行使用
2.3.1 直接使用
this.$store.getters.模块名.模块属性
如：
this.$store.getters.user.name
2.3.2 mapGetters辅助函数
computed:{
...mapGetters('模块名' ['xxx'])
...mapGetters( '模块名' {新名字:'xxx'})
}
3.mutations
3.1 直接使用方式（不使用map辅助函数）
this.$store.commit('mutation名', 参数)
3.2 直接使用方式（使用map辅助函数）
辅助函数mapMutations
在公共数据中的语法（没有分模块的时候）
methods: {
...mapMutations(['mutation名']),
...mapMutations({'新名字': 'mutation名'})
}
3.3在分模块中进行使用
3.3.1 直接使用
this.$store.commit('模块名/mutation名', 参数)
3.3.2 mapMutations辅助函数
methods: {
...mapMutations('模块名', ['xxx']),
...mapMutations('模块名',{'新名字': 'xxx'})
}
4.actions
4.1 直接使用方式（不使用map辅助函数）
this.$store.dispatch('action名', 参数)
4.2 直接使用方式（使用map辅助函数）
辅助函数mapActions
在公共数据中的语法（没有分模块的时候）
methods: {
...mapActions(['actions名']),
...mapActions({'新名字': 'actions名'})
}
4.3在分模块中进行使用
4.3.1 直接使用
this.$store.dispatch('模块名/action名', 参数)
4.3.2 mapMutations辅助函数
methods: {
...mapActions('模块名', ['xxx']),
...mapActions('模块名',{'新名字': 'xxx'})
}
注意点
在computed中: mapState,mapGetters
在methods中:,mapActions，mapMutations
