如何使用 onclick 事件将参数传递给 $store.getters？

Question

如何使用 onclick 事件将参数传递给 $store.getters？我可以看到默认值，但看不到新值。这是我的代码

const store = new Vuex.Store({
  state: {
    notes: [
      { id: 1, text: 'Hello World 1, Vuex!', deleted: false}, 
      { id: 2, text: 'Hello World 2, Vuex!', deleted: true},
      { id: 3, text: 'Hello World 3, Vuex!', deleted: false}
    ]
  },    
  getters: {
    getNoteById: (state) => (id) => {
      return state.notes.find(note => note.id === id);
    }
  }
});    

new Vue({
  el: "#app",
  data() {
    return {
      result: '' 
    }
  },
  store,
  computed: {
    note() {
      return this.$store.getters.getNoteById(3);
    }
  },
  methods: {
    showText(id) {
      this.result = this.$store.getters.getNoteById(id);
    }
  }
});

和html

<div id='app'>
  <p>Default value: {{ note.text }}</p>  
    <button @click="showText('1')">1</button>  
    <button @click="showText('2')">2</button>  
    <button @click="showText('3')">3</button>    
  <p>New value: {{ result.text }}</p>
</div>

Answer 1

您的 getter 工作正常。在搜索 id 为 '1'、'2' 或 '3'.

的任何项目时，它正确 returns undefined

因为商店中没有任何此类商品。

您所有的商店商品都有编号 id，其中 none 有一个字符串 id。看看它是否有效（我更改了发送号码的模板）：

Vue.config.productionTip = false;
Vue.config.devtools = false;
const store = new Vuex.Store({
  state: {
    notes: [
      { id: 1, text: 'Hello World 1, Vuex!', deleted: false}, 
      { id: 2, text: 'Hello World 2, Vuex!', deleted: true},
      { id: 3, text: 'Hello World 3, Vuex!', deleted: false}
    ]
  },    
  getters: {
    getNoteById: (state) => (id) => {
      return state.notes.find(note => note.id === id);
    }
  }
});    

new Vue({
  el: "#app",
  data() {
    return {
      result: '' 
    }
  },
  store,
  computed: {
    note() {
      return this.$store.getters.getNoteById(3);
    }
  },
  methods: {
    showText(id) {
      this.result = this.$store.getters.getNoteById(id);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id='app'>
  <p>Default value: {{ note.text }}</p>  
    <button @click="showText(1)">1</button>  
    <button @click="showText(2)">2</button>  
    <button @click="showText(3)">3</button>    
  <p>New value: {{ result.text }}</p>
</div>

如果出于任何原因您无法控制传入类型（读取 <input> 的值时可能会遇到此问题，它始终是 string，甚至当输入的类型为 "number") 时，您可能希望将值转换为数字：+'5' => 5.
因此，作为修复模板的替代方法，如上所示，您可以在方法中执行此操作：

 showText(id) {
   this.result = this.$store.getters.getNoteById(+id);
 }

如何使用 onclick 事件将参数传递给 $store.getters？

How to pass argument to $store.getters with onclick event?

vue.js

vuex