草庐IT

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

coder 2024-07-15 原文

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

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

搜索本身包含以下步骤:

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

你明白了。

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

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

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

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

最佳答案

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

关于javascript - 有多少业务逻辑属于 Vuex？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49040922/

javascriptVuexsectioncodenoreferrervue.jsstate-management

有关javascript - 有多少业务逻辑属于 Vuex？的更多相关文章

  1. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  2. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

  3. ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 变量赋值后的 if 语句 - 有多常见？ - 2

    我最近与一位同事讨论了以下Ruby语法:value=ifa==0"foo"elsifa>42"bar"else"fizz"end我个人并没有看到太多这种逻辑，但我的同事指出，这实际上是一种相当普遍的Rubyism。我试着用谷歌搜索这个主题，但没有找到任何文章、页面或SO问题来讨论它，这让我相信这可能是一种非常实际的技术。然而，另一位同事发现语法令人困惑，而是将上面的逻辑写成这样:ifa==0value="foo"elsifa>42value="bar"elsevalue="fizz"end缺点是value=的重复声明和隐式elsenil的丢失，如果我们想使用它的话。这也感觉它与Ruby

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby-on-rails - Rspec 测试属于并且有很多 - 2

    我正在运行rspec测试以确保两个模型通过has_many和belongs_to相互关联。下面是我的测试。describe"testingforhasmanylinks"dobeforedo@post=Post.new(day:"Day1",content:"Test")@link=Link.new(post_id:@post.id,title:"google",url:"google.com")endit"inthepostmodel"do@post.links.first.url.should=="google.com"endend测试告诉我url是一个未定义的方法。我的测试有什么

  8. Linux磁盘分区中物理卷（PV）、卷组（VG）、逻辑卷（LV）创建和（LVM）管理 - 2

    文章目录一基础定义二创建逻辑卷2-1准备物理设备2-2创建物理卷2-3创建卷组2-4创建逻辑卷2-5创建文件系统并挂载文件三扩展卷组和缩减卷组3-1准备物理设备3-2创建物理卷3-3扩展卷组3-4查看卷组的详细信息以验证3-5缩减卷组四扩展逻辑卷4-1检查卷组是否有可用的空间4-2扩展逻辑卷4-3扩展文件系统五删除逻辑卷5-1备份数据5-2卸载文件系统5-3删除逻辑卷5-4删除卷组5-5删除物理卷六LVM逻辑卷缩容6-1缩容注意事项6-2标准缩容步骤一基础定义LVM，LogicalVolumeManger，逻辑卷管理，Linux磁盘分区管理的一种机制，建立在硬盘和分区上的一个逻辑层，提高磁盘分

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - Ruby 和 SQL 中的重复业务逻辑 - 2

    我有一个PORO(普通旧Ruby对象)来处理一些业务逻辑。它接收一个ActiveRecord对象并对其进行分类。为了简单起见，以下面为例:classClassificatorSTATES={1=>"Positive",2=>"Neutral",3=>"Negative"}definitializer(item)@item=itemenddefnameSTATES.fetch(state_id)endprivatedefstate_idreturn1if@item.value>0return2if@item.value==0return3if@item.value但是，我还想根据这些st

随机推荐