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

Question

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

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

搜索本身包括以下步骤:

• show loading spinner(更新store对象)
• 发送访问API的操作
• store使用products,spinner 更新对象
• 决定产品清单是否用尽
• 隐藏加载微调器

你明白了.

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

我正在谈论访问商店参数,例如productsExhausted(当没有更多产品要显示时)或productPage(每次触发无限滚动模块时增加)等.

在Vuex中有多少逻辑 - 以及什么样的类型？多少钱不？

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

Answer 1

Vuex允许您共享数据！

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

多个组件可以使用的所有数据都应添加到存储中。

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

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

我认为您应该做的是将请求放入一个动作中，然后更改变量的状态，然后UI会自动反映出更改。

此外，一个适用的模式是将大多数逻辑转换为状态逻辑。例如，考虑一个跳跃的雪人的演示。在这里，单击操作将导致从商店更新值。尽管有趣的部分是，当商店更改时，一个组件使用手表功能来通知。这样，我们将逻辑保留在组件内部，但将存储用作事件发射器。

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});
    }
  }
})