在 Vuex 中创建突变和动作？

Question

我的组件中有几个方法，我想将它们移到我的 Vuex Store 中，以将它们用作 Mutations/Actions，但我不太确定该怎么做，因为它们都是方法，我正在调用其中一个另一个方法，我知道我不能用突变来做到这一点，即在另一个中调用一个突变。我尝试设置一个动作并调用我的突变，但我收到了一个错误。

查看这个工作的Codepen，它设置了我想移入 Vuex 的方法。

这是使用上述 vuex 实现的工作 CodeSandbox。

这是我想要移入我的 Vuex 商店的工作示例，它与上面的 Codepen 相同：-

new Vue({
  el: "#app",
  data() {
    return {
      selected: [],
      animalList: [],
      moreAnimals: [{
          title: "cat",
          value: "cat"
        },
        {
          title: "Dog",
          value: "dog"
        },
        {
          title: "camel",
          value: "camel"
        },
      ]
    };
  },
  methods: {
    createTitle() {
      for (let i = 0; i < this.selected.length; i++) {
        let currentSelected = Object.assign({}, this.selected[i]);
        if (currentSelected.title != "camel")
          currentSelected.value = this.getAnimalName(currentSelected.title);
        this.animalList.push(currentSelected);
      }
      this.selected = [];
    },
    getAnimalName(title) {
      let lastAnimal = null;
      for (let i = 0; i < this.animalList.length; i++)
        if (this.animalList[i].title == title)
          lastAnimal = this.animalList[i];
      let index = (lastAnimal) ? Number(lastAnimal.value.split(" ")[1]) + 1 : 1;
      return title + ' ' + index;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-layout row wrap>
        <v-flex xs2 v-for="(animal,index) in animalList" :key="`${animal.value} - ${index}`">
          {{animal.value}}
        </v-flex>
      </v-layout>
      <v-flex v-for="(more,index) in moreAnimals" :key="`${more.value} - ${index}`">
        <v-checkbox :value="more" v-model="selected" :label="more.title">
        </v-checkbox>
      </v-flex>
      <v-btn @click="createTitle">Add</v-btn>
    </v-container>
  </v-app>
</div>

基本上我正在尝试使用 Vuex 实现上述逻辑。任何帮助将不胜感激。非常感谢。

Answer 1

只需将 getAnimalName 变成一个 getter：

getters: {
  // ...
  getAnimalName: (state) => (title) => {
      let lastAnimal = null;
      for (let i = 0; i < state.animalList.length; i++)
        if (state.animalList[i].title === title)
          lastAnimal = state.animalList[i];
      let index = lastAnimal ? Number(lastAnimal.value.split(" ")[1]) + 1 : 1;
      return title + " " + index;
  }
},
mutations: {
  setSelected(state, payload) {
    state.selected = payload;
  }.
  addToList(state, animal) {
    state.animalList.push(animal)
  }
},
actions: {
    createTitle({ commit, state, getters }) {
      for (let i = 0; i < state.selected.length; i++) {
        let currentSelected = Object.assign({}, state.selected[i]);
        if (currentSelected.title !== "camel")
          currentSelected.value = getters.getAnimalName(currentSelected.title);
        commit('addToList', currentSelected);
      }
      commit('setSelected', []);
    }
  }