天天视讯！Vuex Module-状态仓库分割的使用介绍

(资料图)

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 customs

profile.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 common

index.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

<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>

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中文网其它相关文章！

关键词： 相关文章 创建目录 视频教程