三十九、Vuex使用

郁子大约 3 分钟约 946 字笔记Vue2尚硅谷张天禹Vuex

（一）基本使用

1.初始化配置文件

  • 初始数据
  • 配置 actions
  • 配置 mutations
// store.js
// 引入Vue
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 使用Vuex
Vue.use(Vuex);

const actions = {
  // 响应组件中加的动作
  jia(context, value) {
    // context ==> miniStore
    // console.log("Actions中的jia被调用了", miniStore, value);
    context.commit("JIA", value);
  },
};

const mutations = {
  // 执行加
  JIA(state, value) {
    // console.log("Mutations中的JIA被调用了", state, value);
    state.sum += value;
  },
};

// 初始化数据
const state = {
  sum: 0,
};

// 创建并暴露Store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

2.组件中读取 Vuex 中的数据

$store.state.sum;

3.组件中修改 Vuex 中的数据

$store.dispatch("actions中的方法名", 数据);
// 或
$store.commit("mutations中的方法名", 数据);

4.备注

  • 若没有网络请求或其它业务逻辑，组件中也可以越过 actions
  • 即不写 dispatch 直接编写 commit

（二）getters 的使用

1.作用

  • 当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工

2.追加 getters 配置

// store.js
......

const getters = {
  bigSum(state) {
    return state.sum * 10;
  }
};

// 创建并暴露store
export default new Vuex.Store({
  ......,
  getters
});

3.组件中读取数据

$store.getters.bigSum;

（三）四个 map 方法的使用

1.mapState 方法

  • 用于将 state 中的数据映射为计算属性数据
computed: {
  // 借助mapState生成计算属性，从state中读取数据。（对象写法）
  ...mapState({ sum: "sum", school: "school", subject: "subject" }),

  // 借助mapState生成计算属性，从state中读取数据。（数组写法）
  ...mapState(["sum", "school", "subject"]),
},

2.mapGetters 方法

  • 用于将 getters 中的数据映射为计算属性数据
computed: {
  // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
  ...mapGetters({ bigSum: "bigSum" }),

  // 借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
  ...mapGetters(["bigSum"]),
},

3.mapActions 方法

  • 用于生成与 actions 对话的方法
  • 即：包含 $store.dispatch(xxx) 的函数
methods: {
  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions。（对象写法）
  ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),

  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions。（数组写法）
  ...mapActions(["incrementOdd", "incrementWait"]),
},

4.mapMutations 方法

  • 用于生成与 mutations 对话的方法
  • 即：包含 $store.commit(xxx) 的函数
methods: {
  // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations。（对象写法）
  // 绑定事件时要自己带参数
  ...mapMutations({ increment: "JIA", decrement: "JIAN" }),

  // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations。（数组写法）
  // mutations中的函数名要相同
  ...mapMutations(["increment", "decrement"]),
},

5.备注

  • mapActions 与 mapMutations 使用时，若需要传递参数
  • 则：在模板中绑定事件时需要传递好参数，否则参数是事件对象

（四）模块化+命名空间

1.目的

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

2.修改配置文件

// store.js
const countAbout = {
  namespaced: true, // 开启命名空间
  state: {
    x: 1,
  },
  mutations: {...},
  actions: {...},
  getters: {
    bigSum(state) {
      return state.sum = 19;
    }
  }
};

const personAbout = {
  namespaced: true, // 开启命名空间
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...}
};

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
});

3.开启命名空间后，组件中读取 state 数据

// 方式一：自己直接读取
this.$store.state.personAbout.list;

// 方式二：借助mapState读取
...mapState("countAbout", ["sum", "school", "subject"]),

4.开启命名空间后，组件中读取 getters 数据

// 方式一：自己直接读取
this.$store.getters["personAbout/firstPersonName"];

// 方式二：借助mapGetters读取
...mapGetters("countAbout", ["bigSum"]),

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

// 方式一：自己直接dispatch
this.$store.dispatch("personAbout/addPersonWang", person);

// 方式二：借助mapActions
...mapActions("countAbout", { incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' }),

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

// 方式一：自己直接commit
this.$store.commit("personAbout/ADD_PERSON", person);

// 方式二：借助mapMutations
...mapMutations("countAbout", { increment: 'JIA', decrement: 'JIAN' }),
上次编辑于: