Vue知识点整理（五）- vuex（3）- 模块化和命名空间

目录

一、目的

二、模块化应用

2.1 store.js直接应用模块化

2.2 store.js 外部引入

三、开启命名空间后的读取与调用

3.1 state数据

3.2 getters数据

3.3 调用dispatch

3.4 调用commit

四、案例练习

4.1 count.js

4.2 game.js

4.3 index.js - store配置

4.4 Game.vue

4.5 Count.vue

---

一、目的

让代码更好维护，让多种数据分类更加明确

二、模块化应用

2.1 store.js直接应用模块化

// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);

// 模块1相关的配置
const 模块名1 = {
    namespace:true, // 开启命名空间
    state:{...},
    actions:{...},
    mutations:{...},
    getters:{...}
}

// 模块2相关的配置
const 模块名2 = {
    namespace:true, // 开启命名空间
    state:{...},
    actions:{...},
    mutations:{...},
    getters:{...}
}

export default new Vuex.Store({
    modules:{
        自定义模块命名1:模块名1,
        自定义模块命名2:模块名2,
    }
})

2.2 store.js 外部引入

让 store.js 更加精简，维护只需要去对应的外部文件

例如：

store外部文件：模块1.js

// 模块1相关配置
export default {
    namespace:true, // 开启命名空间
    state:{...},
    actions:{...},
    mutations:{...},
    getters:{...}
}

store外部文件：模块2.js

// 模块2相关配置
export default {
    namespace:true, // 开启命名空间
    state:{...},
    actions:{...},
    mutations:{...},
    getters:{...}
}

store.js 引入 模块1.js 和 模块2.js

// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";

// 引入模块1.js
import 模块名1 from "./模块1.js";

// 引入模块2.js
import 模块名2 from "./模块2.js";

// 应用Vuex插件
Vue.use(Vuex);


export default new Vuex.Store({
    modules:{
        自定义模块命名1:模块名1,
        自定义模块命名2:模块名2,
    }
})

三、开启命名空间后的读取与调用

3.1 state数据

开启命名空间后，组件读取state数据：

// 方式一：自己直接读取, dataName代指state内自己命名的数据
this.$store.state.自定义模块命名.dataName
.....

// 方式二：借助mapState读取
...mapState('自定义模块命名',['dataName','...','...'])

3.2 getters数据

开启命名空间后，组件读取getters数据：

// 方式一：自己直接读取, dataName代指getters内自己命名的数据
this.$store.getters['自定义模块命名/dataName']
.....

// 方式二：借助mapGetters读取
...mapGetters('自定义模块命名',['dataName','...','...'])

3.3 调用dispatch

开启命名空间后，组件中调用dispatch：

// 方式一：自己直接dispatch, data代值传入的数据
this.$store.dispatch('自定义模块命名/actions中方法名', data)
.....

// 方式二：借助mapActions
...mapActions('自定义模块命名',{事件1: "actions中方法名1", 事件2: "actions中方法名2"，...})

3.4 调用commit

开启命名空间后，组件中调用commit：

// 方式一：自己直接commit, data代值传入的数据名
this.$store.commit('自定义模块命名/mutations中方法名', data)
.....

// 方式二：借助mapMutations
...mapMutations('自定义模块命名',{事件1: "mutations方法1", 事件2: "mutations方法2"，...})

四、案例练习

以 Vue知识点整理（五）- vuex（2）中 第三节 多组件数据共享 案例 为基础

4.1 count.js

将 求和组件相关 的 store配置项封装到count.js中

// 求和相关的配置
export default {
  namespaced: true,
  actions: {
    add(context, value) {
      context.commit("ADD", value);
    },
    sub(context, value) {
      context.commit("SUB", value);
    },
    addOdd(context, value) {
      if (context.state.sum % 2) {
        context.commit("ADD", value);
      }
    },
    addWait(context, value) {
      setTimeout(() => {
        context.commit("ADD", value);
      }, 1000);
    },
  },
  mutations: {
    ADD(state, value) {
      state.sum += value;
    },
    SUB(state, value) {
      state.sum -= value;
    },
  },
  state: {
    sum: 0,
  },
  getters: {
    bigSum(state) {
      return state.sum * 10;
    },
  },
};

4.2 game.js

将 游戏列表组件相关 的 store配置项封装到game.js中，其中actions中添加了"addE"事件相关内容以及addNameServer事件联系后端API发送请求（异步事件），访问免费小语录API；getters中存放了 firstGameName数据 - 用于显示当前列表第一个的数据名

import axios from "axios";
import { nanoid } from "nanoid";
// 游戏列表相关的配置
export default {
  namespaced: true,
  actions: {
    addE(context, value) {
      if (value.name.indexOf("E") === 0) {
        context.commit("ADD_GAME", value);
      } else {
        alert("添加的游戏必须带有大写字母E");
      }
    },
    addNameServer(context) {
      axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then(
        (response) => {
          context.commit("ADD_GAME", { id: nanoid(), name: response.data });
          console.log(response);
        },
        (error) => {
          alert(error.message);
        }
      );
    },
  },
  mutations: {
    ADD_GAME(state, value) {
      state.gameList.unshift(value);
    },
  },
  state: {
    gameList: [{ id: "001", name: "Splatoon3" }],
  },
  getters: {
    firstGameName(state) {
      return state.gameList[0].name;
    },
  },
};

4.3 index.js - store配置

引入了 count.js模块 和 game.js模块 并命名

// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);

import countOption from "./count";
import gameOption from "./game";

// 创建并暴露store
export default new Vuex.Store({
  modules: {
    countAbout: countOption,
    gameAbout: gameOption,
  },
});

4.4 Game.vue

添加了 addE事件 和 addNameServer事件相关按钮，并修改了开启命名空间后的state、getters的读取与actions、mutations的调用

4.5 Count.vue

修改了开启命名空间后的state、getters的读取与actions、mutations的调用