vue vuex 大型项目demo示例
1、vuex 动态模块配置
import Vue from 'vue'
import Vuex from 'vuex'
import store from '@/store';
// 使用Vuex插件,即使插件被调用多次,插件也只会安装一次
Vue.use(Vuex);
// state存储数据的状态
const state = {
// 数据状态
name: 'mfg'
}
// getters获取数据状态
const getters = {
// 可以使用store.getters.myName获取数据
myName: state => {
return state.name
}
}
// mutations更改数据状态的唯一方法
const mutations = {
// 每个mutations都有一个事件类型type和回调函数。下面代码type为editName,回调函数即完成数据更改。
// agr为参数
editName(state, arg) {
state.name = arg;
}
}
// actions提交的是mutation,处理的异步操作
const actions = {
// 传递的参数为arg
editNameAction({ commit, state }, arg) {
commit('editName', arg)
}
}
// registerModule,在 store 创建之后,注册模块
// 模块动态注册功能可以让其他vue插件使用注册好的新模块
store.registerModule('myNameSpace', {
// 命名空间,模块具有更高的封装度和复用性
namespaced: true,
state,
mutations,
getters,
actions
})
或者组件注册:
<script>
import storeIndex from '../protect/store'
import store from '@/store'
export default {
name: 'intelligence',
beforeMount() {
//组件注册store的命名空间
store.registerModule('intelligence', storeIndex)
},
destroyed() {
//组件销毁store的命名空间
store.unregisterModule('intelligence')
}
}
</script>
/protect/store文件:
export default {
namespaced: true,
modules: {
common,
workflow,
configfile,
sysdetail,
unitdetail
}
}
2、vue单文件demo
<template>
<div>
<!-- 使用mapState获取数据状态 -->
<p>{{name}}</p>
<!-- 使用mapGetters获取数据状态 -->
<p>{{myName}}</p>
<!-- 使用mapMutations更改数据状态 -->
<el-button @click="edit('abc')">修改名字</el-button>
<!-- 使用mapActions更改数据状态 -->
<el-button @click="edit2('def')">修改名字2</el-button>
</div>
</template>
<script>
import sti from 'commons/sti';
import './store';
// 辅助函数mapMutations, mapActions, mapGetters, mapState
import { mapMutations, mapActions, mapGetters, mapState } from 'vuex';
export default sti.page({
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
// 第一个参数为模块上下文myNameSpace
...mapState('myNameSpace', {
name: state => state.name
}),
// 使用对象展开运算符将此对象混入到外部对象中
// 第一个参数为模块上下文myNameSpace
...mapGetters('myNameSpace', ['myName'])
},
data() {
return {}
},
methods: {
// 第一个参数为模块上下文myNameSpace
...mapMutations('myNameSpace', ['editName']),
// 第一个参数为模块上下文myNameSpace
...mapActions('myNameSpace', ['editNameAction']),
// 也可以这样写
// ...mapActions(['myNameSpace/editNameAction']),
edit(arg) {
// 更新数据状态
this.editName(arg);
},
edit2(arg) {
// 更新数据状态
this.editNameAction(arg);
}
},
mounted() {}
});
</script>
在mutations中可以将type设置为常量
const mutations = {
[types.THEME_UPDATE](state, theme) {
state.appTheme = theme
}
}
const actions = {
updateTheme: ({commit}, theme) => {
commit(types.THEME_UPDATE, theme)
}
}
3、严格模式
const store = new Vuex.Store({
// ...
strict: process.env.NODE_ENV !== 'production'
})
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
作者:孟繁贵 Email:meng010387@126.com 期待共同进步!