首頁猿問 Vue /...

Vue / Vuex-模塊二取決于模塊一，模塊一從服務器獲取數據

JavaScript

HUWWW 2021-05-11 17:15:48

看一下這個：import accountModule from '@/store/modules/account/account';import otherModule from '@/store/modules/other/other';export default new Vuex.Store({ modules: { account: accountModule, other: otherModule, }});數據的初始化other取決于account模塊，因為account模塊具有用戶特定的設置。假設other.state.list取決于account.state.settings.listOrder。但是，我希望account模塊的數據來自服務器。這是異步的。因此，當other嘗試進行設置時，它不能僅嘗試進行引用，account.state.settings.listOrder因為來自服務器的響應可能還沒有回來。我嘗試導出承諾在accountModule與模塊本身能解決。但是這種方法似乎行不通。import accountModulePromise from '@/store/modules/account/account';accountModulePromise.then(function (accountMoudle) { import otherModule from '@/store/modules/other/other'; ...});這給我一個錯誤，說import語句必須是頂級的。以下內容也不起作用：let accountModule = await import '@/store/modules/account/account';import otherModule from '@/store/modules/other/other';...這給我一個錯誤，說這await是一個保留字。不過我很困惑，因為https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import表示我應該能夠做到。

查看完整描述

2 回答

繁星點點滴滴

TA貢獻1803條經驗獲得超3個贊

好的，所以您有兩個模塊。一個具有從服務器獲取的狀態，另一個具有依賴于第一個的狀態，對嗎？

我建議采用以下方法：

首先，將模塊設置為空的“狀態”。然后在accountModule中創建一個操作，以設置服務器的狀態。使用吸氣劑對other列表進行排序。最后，在創建應用程序時分派您的操作。

const account = {

namespaced: true,

state: {

listOrder: ''

mutations: {

setListOrder (state, newListOrder) {

state.listOrder = newListOrder

}

actions: {

async fetchServerState (ctx) {

let result = await fetch("/path/to/server")

ctx.commit('setListOrder', result.listOrder)

// or whatever your response is, this is an example

}

const other = {

namespaced: true,

state: {

unorderedList: []

getters: {

list (state, getters, rootState) {

return someSort(state.unorderedList, rootState.account.listOrder);

}

在App.vue中（或任何地方）

created () {

this.$store.dispatch('account/fetchServerState')

}

反對回復 2021-05-27

紅顏莎娜

TA貢獻1842條經驗獲得超13個贊

您的最后一個代碼塊因await必須在內部async函數而無法正常工作。

請記住，await關鍵字僅在異步函數內有效。如果在異步函數的主體之外使用它，則會收到一個SyntaxError。

來自MDN。

您可以使用動態模塊注冊：

accountModulePromise.then(async () => {

let otherModule = await import('@/store/modules/other/other');

store.registerModule('other', otherModule.default);

});

但是，當您要獲取狀態或調度動作時，必須檢查模塊是否已注冊，這是非常糟糕的。

我認為，如果重新設計模塊結構以使彼此解耦，那會更好。嘗試將您的初始化代碼移至其中，main.js或App.vue然后分派操作以從中更新模塊狀態。

更新

從您的上一次更新到將商店解耦的另一種想法，我認為您應該存儲list沒有訂單的商品，并僅在使用時對其進行排序。您可以使用以下方法執行此操作：

計算屬性：

...

computed: {

list () {

let list = this.$store.state.other.list

let order = this.$store.state.account.settings.listOrder

if (!list || !order) return []

return someSort(list, order)

}

beforeCreate () {

this.$store.dispatch('other/fetchList')

this.$store.dispatch('account/fetchListOrder')

}

...

或Vuex吸氣劑：

...

getters: {

list: (state) => (order) => {

return someSort(state.list, order)

}

...

computed: {

list () {

let order = this.$store.state.account.settings.listOrder

return this.$store.getters['others/list'](order)

}

...

反對回復 2021-05-27

2 回答
0 關注
218 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Vue / Vuex-模塊二取決于模塊一，模塊一從服務器獲取數據

Vue / Vuex-模塊二取決于模塊一，模塊一從服務器獲取數據

2 回答

添加回答

Vue / Vuex-模塊二取決于模塊一，模塊一從服務器獲取數據