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

【问题标题】：How much of this business logic belongs in Vuex?这个业务逻辑有多少属于 Vuex？
【发布时间】：2018-08-09 00:05:10
【问题描述】：

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

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

搜索本身包含以下步骤：

显示加载微调器（更新store 对象）
发送操作以访问 API
使用产品、微调器更新 store 对象
决定产品列表是否用完
隐藏加载微调器

你明白了。

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

我说的是访问商店参数，例如productsExhausted（当没有更多产品要显示时）或productPage（每次触发无限滚动模块时都会增加）等。

Vuex 有多少逻辑——以及什么样的逻辑？有多少没有？

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

【问题讨论】：

标签： javascript vue.js vuex state-management

【解决方案1】：

Vuex 允许您共享数据！

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

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

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

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

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

此外，一个很好的应用模式是将大部分逻辑转换为状态逻辑。例如，考虑这个jumping snowman 的演示。在这里，单击操作会导致从商店更新值。尽管有趣的部分是一个组件使用watch 功能在商店更改时收到通知。这样我们将逻辑保留在组件内部，但将 store 用作事件发射器。

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

【讨论】：