javascript - 有多少业务逻辑属于 Vuex？

Question

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

我已将 Vuex 添加到应用程序，这样当路由器将用户移动到特定产品页面时，搜索结果和产品搜索数组不会消失。

搜索本身包含以下步骤:

• 显示加载微调器(更新 store 对象)
• 发送访问 API 的操作
• 用产品更新 store 对象，spinner
• 判断产品列表是否用尽
• 隐藏加载微调器

你明白了。

所有变量都存储在 Vuex 中，按理说所有业务逻辑也应该属于那里，但真的应该这样吗？

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

Vuex 中有多少逻辑？属于什么类型？多少不？

我的印象是 Vuex 仅用于存储，但由于所有数据都位于此处，因此将其全部取回 Vue 应用程序然后将其全部发回似乎是一种过于冗长的解决问题的方法。

Answer 1

Vuex 允许您共享数据!

对于与应用程序状态有关的一切，它都非常简单。

All the data that can be used by multiple components should be added to the store.

现在说到业务逻辑，虽然我觉得官方文档里写的不是很清楚，但应该遵循同样的原则。

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

我认为你应该做的是将请求放在一个 Action 中，然后改变你的变量的状态，你的 UI 会自动反射(reflect)这些变化。

此外，一个很好的应用模式是将大部分逻辑转换为状态逻辑。例如，考虑这个 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});
    }
  }
})