如何简化你的Vuex Store

更新日期: 2019-07-26阅读: 1.9k标签: vuex

随着vue应用程序的大小增加,Vuex Store中的actions和mutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。


Vuex是什么

Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。


我们怎么使用Vuex

我们正在使用Vuex在Factory Core Framework应用程序中的所有应用程序之间共享状态。由于框架是一组应用程序,(假设)我们目前有九个Vuex stores。每个store都有自己的state, actions和mutations。我们在store中使用actions来对后台进行api调用。数据返回后,我们使用mutations将其存储在state中。这允许任何组件访问该数据。可以想象到,我们的store可以有大量的actions来处理这些API调用。以下是我们其中一个Vuex stores中所有的actions操作示例。


这个store有16个actions。现在想象一下,如果我们有9个store,我们的Factory Core Framework总共有多少个actions。


简化我们的Actions

我们所有的actions操作基本上都执行相同的功能。每个action都执行以下操作:

  • 从API获取数据(必要时包括有效负载)
  • 以state存储数据(可选)
  • 返回对调用该action组件的响应

要将这些重构为单个(统一)操作action,我们需要知道action需要明确的事情:

  • 要击中的端点(请求接口)
  • 在API调用中是否发送有效负载
  • 是否将数据提交到state中,如果是,则提交到哪个状态变量


我们当前的action

下面是我们其中的一个actions示范:

async getLineWorkOrders({ rootState, commit }, payload) {
    try {
        let response = await axios.post(
           'api.factory.com/getLineWorkOrders',
           Object.assign({}, payload.body, { language: rootState.authStore.currentLocale.locale }),
           rootState.config.serviceHeaders
        );
       commit( 'setCurrentWorkOrderNumber', response.data.currentWorkOrderNumber );

       return response.data;
    } catch (error) {
       throw error;
    }
},

在这个action中,我们通过击中端点(发起请求)api.factory.com/geteLineWorkOrders从我们的后台API获取数据。检索到数据之后,将更新state变量currentWorkOrder。最后,数据将返回到进行调用的组件中。我们所有的actions都有这种格式。要将它重构为单个操作,我们需要拥有端点,无论是否发送有效负载以及是否提交数据。是我们重构的单一action:

async fetchData({ rootState, commit }, payload) {
   try {
       let body = { language: rootState.authStore.currentLocale.locale };
       if (payload) {
           body = Object.assign({}, payload.body, body);
       }
      let response = await axios.post(\`api.factory.com/${payload.url}\`, body, rootState.config.serviceHeaders );
      if (payload.commit) {
          commit('mutate', {
              property: payload.stateProperty,
              with: response.data\[payload.stateProperty\]
           });
      }
      return response.data;
   } catch (error) {
      throw error;
   }
}

此单个action将处理每种可能的调用。如果我们需要通过API调用发送数据,它可以做到。如果我们需要commit提交数据,它可以做到。如果它不需要提交数据,则不会。它始终将数据返回到组件。


使用统一的mutation

之前,对于需要改变状态mutate state的每个action,我们创建了一个新的mutation来处理这个问题。我们使用单一的mutation来处理这个问题。下面是我们的单一mutation:

const mutations = {
    mutate(state, payload) {
       state\[payload.property\] = payload.with;
    }
};

如果一个action中需要在store中存储数据,我们如下调用mutation:

commit('mutate', {
    property: <propertyNameHere>,
    with: <valueGoesHere>
});


总结

通过统一我们的action和mutation,我们大大简化了我们的store中的actions和mutations。译者加:其实就是为了更好的管理vuex,而形成模版方式的编写

原文:https://dev.to/ratracegrad/how-to-greatly-simplify-your-vuex-store-1fkl


链接: https://www.fly63.com/article/detial/4382

为什么使用Vuex

在学习Vuex之前,先了解一下“单向数据流”。Vuex核心就是它的store,其中,有三个重要的部分,State:通过它存取多个组件共享的数据。Mutations:可以改变State中的数据,Actions:提交mutation,可以包含任意异步操作这一步不是必要的。

Vue.js学习,关于Vuex源码解析

Vuex是一个专门为Vue.js框架设计的、用于对Vue.js应用程序进行状态管理的库,它借鉴了Flux、redux的基本思想,将共享的数据抽离到全局,以一个单例存放,同时利用Vue.js的响应式机制来进行高效的状态管理与更新。

vue + vuex + koa2交互实例

主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径

vuex 源码:深入 vuex 之 mutation

vuex 规定更改 state 的唯一方法是提交 mutation,主要是为了能用 devtools 追踪状态变化。那么,提交 mutation 除了最主要的更改 state,它还做了其它一些什么事情呢,让我们来一探究竟。

使用Vuex解决Vue中的身份验证

Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们一起来探索下吧。

关于Vuex的action传入多个参数的问题

已知Vuex中通过actions提交mutations要通过context.commit(mutations,object)的方式来完成,然而commit中只能传入两个参数,第一个就是mutations,第二个就是要传入的参数

Vuex 的异步数据更新

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数 mutation 是同步执行,不是异步执行。

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。一种是state里的数据全部是通过请求来触发action或mutation来改变

Vuex状态管理,state、getter

首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:接下来,在 main.js里面引入store,然后再全局注入一下

Vuex新手的理解与使用

开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!