Vuex：使用存储变量的计算属性中的方法

Question

我正在尝试使用 Vuex，我需要在计算属性中使用方法，就像在我的实际项目中一样。我不知道如何调用方法并将数据存储在Vuex中。

这是一个简单的例子来展示我需要实现的目标：

我的商店：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
          calculations: {
              number: 1,
              letter: 'a',

              combinationA:'test',
          }
    },
    getters:{
    },
    mutations:{
        commit_number(state, val){state.calculations.number = val},
        commit_letter(state, val){state.calculations.letter = val},
        commit_combinationA(state, val){state.calculations.combinationA = val},
    },
    actions: {
    }
})

这是我的组件

<template>
<div>
    <div>
        choose a number:
            <input v-model="number" type="number">
    </div>
<br>
<br>
    <select  v-model="letter" > 
        choose a letter
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>

<p>combination A: {{ combinationA }}</p>
<p>combination A without Vuex: {{ combination_no_vuex }}</p> 

</div>
</template>

<script>

export default {

    methods: {
        MethodCombinationA(letter, number){
            let result = String(letter).concat(number);
            return result;
        },
    },
    computed: {
        number: {
            get () { return this.$store.state.calculations.number;},
            set (value) { this.$store.commit('commit_number', value); }
        },
        letter: {
            get () { return this.$store.state.calculations.letter;},
            set (value) { this.$store.commit('commit_letter', value ); }
        },

        combinationA: {
           get () { return this.$store.state.calculations.combinationA;},
        // set (value) { this.$store.commit('commit_combinationA', this.MethodCombinationA(this.letter, this.number) ); }
        //
        // not working, this is the idea
        },

        combination_no_vuex() {
            return this.MethodCombinationA(this.letter, this.number);
        }
    }
}
</script>

当然，计算属性“combination_no_vuex”按预期工作，我想将“combinationA”存储/提交为“combination_no_vuex”，然后在其他组件中使用它。我知道这是很基本的事情，但我现在卡住了！

--编辑-- 我很确定这不是最好的主意，但不知何故它可以工作：

我添加了一个动作：

    actions: {
        commit_combinationA(context, payload) {
            context.commit('commit_combinationA', payload);
          }
        }

然后，当我获得计算属性时，它会触发该方法，然后我使用手表调度它。

<template>
<div>
    <div>
        choose a number:
            <input v-model="number" type="number">
    </div>
<br>
<br>
    <select  v-model="letter" > 
        choose a letter
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
    </select>

<p>combination A: {{ combinationA }}</p>
<p>combination A alias: {{ combinationAalias }}</p>
<p>combination A without Vuex: {{ combination_no_vuex }}</p> 

</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {

    methods: {
        MethodCombinationA(letter, number){
            const result = String(letter).concat(number);
            return result;
        },
    },
    computed: {
        number: {
            get () { return this.$store.state.calculations.number;},
            set (value) { this.$store.commit('commit_number', value); }
        },
        letter: {
            get () { return this.$store.state.calculations.letter;},
            set (value) { this.$store.commit('commit_letter', value ); }
        },
        combinationA: {
            get () { return this.MethodCombinationA(this.letter, this.number)},
        },
        combinationAalias(){
            return this.$store.state.calculations.combinationA;
        },
        combination_no_vuex() {
            return this.MethodCombinationA(this.letter, this.number);
        }
    },
    watch: {
        combinationA(value){
            this.$store.dispatch('commit_combinationA', value );
        }
    },
}
</script>

Answer 1

methods: {

  MethodCombinationA(letter, number){
    return String(letter).concat(number);
  },

},


computed: {

  number: {
    get() { return this.$store.state.calculations.number; },
    set(value) { this.$store.commit('commit_number', value); },
  },

  letter: {
    get() { return this.$store.state.calculations.letter; },
    set(value) { this.$store.commit('commit_letter', value); },
  },

  combinationA() {
    return this.$store.state.calculations.combinationA;
  },

},


watch: {

  number(value) {
    this.$store.commit('commit_combinationA', this.MethodCombinationA(this.letter, value));
  },

  letter(value) {
    this.$store.commit('commit_combinationA', this.MethodCombinationA(letter, this.value));
  },

},

Answer 2

我自己回答，我发现最好把逻辑放到商店里。

基本上，计算属性返回一个方法值。给方法的参数签名，当然是可重复使用的。

 <div id="app">
  <div>
    choose a number:
    <input v-model="number" type="number">
  </div>

  <br>

   <select v-model="letter" > 
     choose a letter
     <option value="a">a</option>
     <option value="b">b</option>
     <option value="c">c</option>
   </select>

  <p>combination A: {{ combinationA }}</p>

</div>

和js：

const store = new Vuex.Store({
  state: {
    number: 1,
    letter: "a"
  },
  mutations: {
    commit_number(state, val) {
      state.number = val;
    },
    commit_letter(state, val) {
      state.letter = val;
    }
  },
  getters: {
    combinationA(state) {
      return (obj1, obj2) => {
        return String(obj1).concat(obj2);
      }
    }
  }
});

new Vue({
  el: "#app",
  store,
  computed: {
    number: {
      get() { return this.$store.state.number; },
      set(value) { this.$store.commit("commit_number", value); }
    },
    letter: {
      get() { return this.$store.state.letter; },
      set(value) { this.$store.commit("commit_letter", value); }
    },
    combinationA(){ return this.$store.getters.combinationA(this.number, this.letter); }
  }
});