这个业务逻辑中有多少属于Vuex？

Question

我有一个简单的应用程序，它从API中提取产品并在页面上显示它们，如下所示：

我已将Vuex添加到应用中，以便当路由器将用户移动到特定产品页面时，搜索结果以及产品搜索阵列不会消失。

搜索本身包含以下步骤：

• show loading spinner（更新store对象）
• 分派访问API的操作
• 使用products，spinner
更新store对象
• 决定产品清单是否用尽
• 隐藏加载微调器

你明白了。

由于所有变量都存储在Vuex中，因此所有业务逻辑都应该属于那里，但它应该真的存在吗？

我正在谈论访问商店参数，例如productsExhausted（当没有更多的产品可供展示时）或productPage（每次触发无限滚动模块时增加）等。< / p>

Vuex有多少逻辑 - 以及什么类型？多少没有？

我的印象是Vuex仅用于存储，但由于所有数据都位于那里，将其全部提取回Vue应用程序只是为了将其全部发送回去，这似乎是解决问题的过于冗长的方式。

Answer 1

Vuex允许您共享数据！

对于涉及应用程序状态的所有内容，它非常简单。

  

应添加多个组件可以使用的所有数据   到商店。

现在关于业务逻辑，即使我发现它在官方文档中不是很清楚，它应该遵循相同的原则。

我的意思是可以由多个组件使用的逻辑应存储在actions中。 此外，操作允许您处理异步操作。知道了这一点，你的数据代码应该存储在vuex的行动中。

我认为你应该做的是将请求放在一个动作中，然后改变你的变量状态，并自动你的UI将反映这些变化。

此外，一个好的模式是将大多数逻辑转换为状态逻辑。例如，考虑一个jumping snowman的演示。在此处，单击操作会导致从商店更新值。虽然有趣的是，一个组件使用watch功能在商店更改时得到通知。这样我们就可以将逻辑保留在组件中，但是将存储用作事件发射器。

var store = new Vuex.Store({
    state: {
    isJumping: 0
  },
  mutations: {
    jump: function(state){
      state.isJumping++;
    }
  }
})


Vue.component('snowman', {
  template: '<div id="snowman" :class="color">⛄</div>',
  computed: {
    isJumping: function(){
      return this.$store.state.isJumping;
    }
  },
  watch: {
    isJumping: function(){
      var tl = new TimelineMax();
      tl.set(this.$el,{'top':'100px'})
      tl.to(this.$el, 0.2, {'top':'50px'});
      tl.to(this.$el, 0.5, {'top':'100px', ease: Bounce.easeOut});
    }
  }
})