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

Posted 2023-02-23

【中文标题】Vuex：使用存储变量的计算属性中的方法

【英文标题】：Vuex: Using Methods inside Computed Properties with stored variables

【发布时间】：2020-01-08 13:11:34

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你需要从你的组件中调用一个动作。创建执行提交的操作，然后从您的组件运行 this.$store.dispatch('action_name', props)。

对于同步流来说不需要使用操作。

【参考方案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));
  ,

,

【讨论】：

谢谢，但我相信它不像我想要的那样充满活力。我更喜欢返回值的方法。无论如何，我不明白为什么 nt 在计算的“combinationA()”上工作set(value)。有什么想法吗？

好的，我更改了代码以使该方法返回您想要的值。 set(value) 仅在您在 v-model 中使用 combinationA 时有效，或者当您尝试直接更改 combinationA 值时，例如this.combinationA = 'new value';

【参考方案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); 
  
);