Vuex：观察状态中的逻辑

Question

鉴于以下问题，我不知道如何组织我的 Vuex 存储。

我有一组按钮/操作，大约有 100 个。它们在商店中是这样组织的：

buttons: [
  {
    text: 'Button 1',
    doAction (store) {},
    mustShow (store) {
      return state.variable > 10 && state.variable2.counter < 12 && !state.variable3
    }
  }
  ...
]

我可以轻松地在我的视图中显示它们，link它们对点击事件的操作：

<button v-for"button in buttons" @click="button.doAction()"></button>

问题是每个按钮都可以根据它只知道的任意复杂逻辑显示或不显示，正如您在 mustShow 函数中看到的那样。每个按钮都有其独特的逻辑。

我可以轻松地使 getter returns 只有 mustShow 功能 returns 为真的按钮只有必须在特定状态下显示的操作商店的：

availableActions (state) {
    return state.buttons.filter(s => s.mustShow())
}

这是第一次成功，但问题是这个 getter 当然不是反应性的，因为它没有绑定到状态变量，而是绑定到非反应性函数的结果。

您将如何组织代码来完成这项工作？当然，可以将所有按钮的所有显示逻辑放在一个 getter 中。但是，如果我希望按钮的名称也是动态的（作为根据状态中的任意变量计算其值的函数的结果）怎么办？

谢谢

Answer 1

我认为你在这里走错了路：根据经验法则，你不应该有复杂的对象，比如函数定义，来定义你的存储状态。考虑存储状态的一种方式是，它应该是你应该能够在 JSON 中编码的东西，把它交给朋友，然后你的朋友如果解析它并在同一个程序中使用它应该得到同样的结果，很明显状态中的函数不适合这个。

我的建议是：

const state = {
  buttons: [
  {
    text: 'Button 1',
    id: 1
  },
  ...
  ]
}
...
const actions = {
  doAction ({commit}, {btnId}) {
   // now you perform the action you want to do
   ...
   // finally if you want to change the state of your store you
   // should commit a mutation, *do not change the state here!*
   // let the mutation do their job
   // here you put all the things the mutation may need to perform 
   // the change of the state
   const payload = { btnId }   
   commit(changeSomethingInState, { payload })   
  }
}

const mutations = {
  changeSomethingInState (state, { payload }) {
    state.something = payload
}
...

这是在商店定义中。现在在你看来你喜欢：

<button v-for"button in buttons" @click="dispatch('doAction', { btnId: button.id })"/>

Vuex：观察状态中的逻辑

Vuex: Observe logic in state

javascript

vue.js

vuex

vuejs2