网站做多长时间才有流量,北京医疗网站建设,淮北市官网,企业网站首页1、vuex 动态模块配置 import Vue from vueimport Vuex from vueximport store from /store;// 使用Vuex插件#xff0c;即使插件被调用多次#xff0c;插件也只会安装一次Vue.use(Vuex);// state存储数据的状态const state {// 数据状态name: mfg}// getters获取数据状态co…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 clickedit(abc)修改名字/el-button
!-- 使用mapActions更改数据状态 --
el-button clickedit2(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 函数引起的将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
更多专业前端知识请上
【猿2048】www.mk2048.com
