[JavaScript知识库]vue-vuex

1. vuex: state、getters、mutations、actions

、在src目录下面新建一个文件store,在里面新建index.js文件，代码如下：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  // state 用于存储数据 
  state: {
    money: 100,
  },
  // getters 用于获取state里面的数据，同时也可以进行一些简单的计算属性
  getters:{
    getMoney: state => {
      return state.money
      // return state.money + 1  //计算属性
    },
  },
  // mutations 用于修改state里面的数据，修改的方法写在mutations里面（同步操作）
  mutations: {
    addMoney: state => {
      return state.money = state.money + 1
    },
    removeMoney: state => {
      return state.money = state.money - 1
    },
  },
  // actions 也是用于修改state里面的数据，只不过是从actions > mutations > state的顺序进行修改里面的state的数据（异步操作--推荐）
  actions: {
    changeAddMoney: (add) => {
      add.commit("addMoney")
    },
    changeRemoveMoney: (remove) => {
      remove.commit("removeMoney")
    },
  },
  modules: {},
});

在需要引用vuex里面的数据的文件里面写，代码如下所示：

<template>
  <div class="vuex">
    <h3>vuex</h3>
    <div>
      <h4>money</h4>
      <div>直接从state里面获取值，不推荐：{{ this.$store.state.money }}</div>
      <div>通过getters进行获取值，推荐：{{ this.$store.getters.getMoney }}</div>
      <div>
        <p>通过mutations直接进行修改state里面的值，不推荐（同步触发state值）</p>
        <button @click="addMutations">Add</button>
        <button @click="removeMutations">Remove</button>
      </div>
      <div>
        <p>通过actions间接进行修改state里面的值，推荐（异步触发state值）</p>
        <button @click="addActions">Add</button>
        <button @click="removeActions">Remove</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Vuex",
  methods: {
    // 此处不要使用箭头函数，因为箭头函数会有this指向问题，会出现$store未定义。
    addMutations() {
      // 不推荐--同步
      this.$store.commit("addMoney");
    },
    removeMutations() {
      // 不推荐--同步
      this.$store.commit("removeMoney");
    },
    addActions() {
      // 推荐--异步
      this.$store.dispatch("changeAddMoney");
    },
    removeActions() {
      // 推荐--异步
      this.$store.dispatch("changeRemoveMoney");
    },
  },
};
</script>

2. vuex-modules

store / index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const moduleA = {
  state: {
    age2: 24
  },
  getters:{
    getAge2: state => {
      return state.age2
    }
  },
  mutations: {
    addAge2: state => {
      return state.age2 = state.age2 + 1
    },
    removeAge2: state => {
      return state.age2= state.age2 - 1
    },
  },
  actions: {
    changeAddAge2: (add) => {
      add.commit("addAge2")
    },
    changeRemoveAge2: (remove) => {
      remove.commit("removeAge2")
    },
  },
};

export default new Vuex.Store({
  state: {},
  getters:{},
  mutations: {},
  actions: {},
  modules: {
    moduleA: moduleA
  },
});

src / views / Vuex.vue

<template>
  <div class="vuex">
    <h3>vuex</h3>
    <div>
      <h4>modules</h4>
      <div>
        在modules中，直接从state里面获取值，不推荐：{{
          this.$store.state.moduleA.age2
        }}
      </div>
      <div>
        在modules中，通过getters进行获取值，推荐：{{
          this.$store.getters[("moduleA", "getAge2")]
        }}
      </div>
      <div>
        <p>
          在modules中，通过mutations直接进行修改state里面的值，不推荐（同步触发state值）
        </p>
        <button @click="addMutationsAgeModule">Add</button>
        <button @click="removeMutationsAgeModule">Remove</button>
      </div>
      <div>
        <p>
          在modules中，通过actions间接进行修改state里面的值，推荐（异步触发state值）
        </p>
        <button @click="addActionsAgeModule">Add</button>
        <button @click="removeActionsAgeModule">Remove</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Vuex",
  components: {},
  methods: {
    // 此处不要使用箭头函数，因为箭头函数会有this指向问题，会出现$store未定义。
    addMutationsAgeModule() {
      this.$store.commit("addAge2");
    },
    removeMutationsAgeModule() {
      this.$store.commit("removeAge2");
    },
    addActionsAgeModule() {
      this.$store.dispatch("changeAddAge2");
    },
    removeActionsAgeModule() {
      this.$store.dispatch("changeRemoveAge2");
    },
  },
};
</script>