(资料图)
vuex构成
vuex主要包含以下五个部分:
State // 存储变量、数据Getter // 类似计算属性Mutation // 唯一修改state的方法Action // 异步调用MutationModule // 将store模块化vuex的modules使用
创建目录
在此示例中，我创建了两个store文件，分别是 profile.js和custom.js，一个根文件index.js
custom.js
const customs = { namespaced: true, // 创建命名空间 state: { // 存储变量 showAlert: false }, mutations: { // 定义修改state方法 CHANGESHOW: (state, params) => { state.showAlert = !state.showAlert } }, actions: { // 异步调用mutations setShow: ({ commit }) => { commit("CHANGESHOW") } }, getters: { // 将数据过滤输出 bodyShow: state => state.showAlert }}export default customsprofile.js
const profile = { namespaced: true, state: { name: "common name", age: 18, bool: false }, mutations: { CHANGEMSG: (state, params) => { state.name = params }, CHANGEAGE: (state, params) => { state.name = params }, CHANGEBOOL: (state) => { state.bool = !state.bool } }, actions: { setName: ({ commit }) => { commit("CHANGEMSG", "Vuex common name") }, setAge: ({ commit }) => { commit("CHANGEAGE", 81) }, setBool: ({ commit }) => { commit("CHANGEBOOL") } }, getters: { vuexName: state => state.name, vuexAge: state => state.age, vuexBool: state => state.bool }}export default commonindex.js
import Vue from "vue"import Vuex from "vuex"// 引入子storeimport profile from "./modules/profile"import customs from "./modules/customs"// Vue.use(Vuex)const store = new Vuex.Store({ modules: { profile, customs }})export default store // 导出store，以便于后续使用在需要使用的.vue文件里进行使用。方法如下
index.vue
name:<script>import { mapActions, mapGetters } from "vuex"export default {computed: { ...mapGetters("profile", ["vuexName", "vuexAge", "vuexBool"]), ...mapGetters("customs", ["bodyShow"]) },methods: { ...mapActions("customs", ["setShow"]), ...mapActions("profile", ["setName", "setAge", "setBool"]),}</script>{{vuexName}}
age:{{vuexAge}}
bool:{{vuexBool}}
click me ,change showAlert {{bodyShow}}
app.js
import Vue from "vue";import VueRouter from "vue-router";// styleimport "./../../sass/app.scss";// Componentsimport Main from "./Main.vue";import routes from "./routes";// storeimport store from "./store"; // 将store挂载到VueVue.use(VueRouter);const router = new VueRouter({ routes, saveScrollPosition: true,});new Vue({ router, store, ...Main }).$mount("#app");初始效果图 ⬇️ 点击按钮之后效果图 ⬇️ 至此，modules使用流程演示完毕！【相关推荐：vue.js视频教程】
以上就是Vuex Module-状态仓库分割的使用介绍的详细内容，更多请关注php中文网其它相关文章！
