We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
随着Vue应用程序的大小增加,Vuex Store中的actions和mutations也会增加。本文,我们将介绍如何将其减少到易于管理的东西。
Vue
Vuex Store
actions
mutations
Vuex是vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。
Vuex
vue.js
我们正在使用Vuex在Factory Core Framework应用程序中的所有应用程序之间共享状态。由于框架是一组应用程序,(假设)我们目前有九个Vuex stores。每个store都有自己的state, actions和mutations。我们在store中使用actions来对后台进行API调用。数据返回后,我们使用mutations将其存储在state中。这允许任何组件访问该数据。可以想象到,我们的store可以有大量的actions来处理这些API调用。以下是我们其中一个Vuex stores中所有的actions操作示例。
Factory Core Framework
Vuex stores
store
state, actions和mutations
state
这个store有16个actions。现在想象一下,如果我们有9个store,我们的Factory Core Framework总共有多少个actions。
我们所有的actions操作基本上都执行相同的功能。每个action都执行以下操作:
action
要将这些重构为单个(统一)操作action,我们需要知道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:
api.factory.com/geteLineWorkOrders
currentWorkOrder
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提交数据,它可以做到。如果它不需要提交数据,则不会。它始终将数据返回到组件。
commit
之前,对于需要改变状态mutate state的每个action,我们创建了一个新的mutation来处理这个问题。我们使用单一的mutation来处理这个问题。下面是我们的单一mutation:
mutate state
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,而形成模版方式的编写
更多的内容,请戳我的博客进行了解,能留个star就更好了💨
The text was updated successfully, but these errors were encountered:
No branches or pull requests
随着
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
都执行以下操作:state
存储数据(可选)action
组件的响应要将这些重构为单个(统一)操作
action
,我们需要知道action
需要明确的事情:state
中,如果是,则提交到哪个状态变量我们当前的action
下面是我们其中的一个
actions
示范:在这个
action
中,我们通过击中端点(发起请求)api.factory.com/geteLineWorkOrders
从我们的后台API获取数据。检索到数据之后,将更新state
变量currentWorkOrder
。最后,数据将返回到进行调用的组件中。我们所有的actions
都有这种格式。要将它重构为单个操作,我们需要拥有端点,无论是否发送有效负载以及是否提交数据。下面👇是我们重构的单一action
:此单个
action
将处理每种可能的调用。如果我们需要通过API调用发送数据,它可以做到。如果我们需要commit
提交数据,它可以做到。如果它不需要提交数据,则不会。它始终将数据返回到组件。使用统一的mutation
之前,对于需要改变状态
mutate state
的每个action
,我们创建了一个新的mutation
来处理这个问题。我们使用单一的mutation
来处理这个问题。下面是我们的单一mutation
:如果一个
action
中需要在store
中存储数据,我们如下调用mutation
:总结
通过统一我们的
action
和mutation
,我们大大简化了我们的store
中的actions
和mutations
。后话
更多的内容,请戳我的博客进行了解,能留个star就更好了💨
The text was updated successfully, but these errors were encountered: