您的操作已將上下文和負載參數合并為一個參數，而不是將它們分開： addItem({ commit }, payload) { ✅ // Correct addItem({ commit, payload }) { ❌ // Incorrect 另一個問題是模塊的state是一個數組而不是一個對象，并且被直接使用，就好像它是一個狀態項一樣。將state設為對象，并將項數據放入數組屬性中： state: { items: [ { id: "1", name: "1" }, { id: "2", name: "2" }, { id: "3", name: "3" } ]} 更改您的計算機以使用此items屬性： const ItemsState = computed(() => store.state.a.items); 在變異中，推送新值（之前的值根本不會更改state，因為它只會更改函數參數引用）： SET_NEW_ITEM(state, payload) { state.items.push(payload);} 你不需要一個動作來稱之為： function addItem() { let newItem = { id: "5", name: "5" }; store.commit('a/SET_NEW_ITEM', newItem)} 這是你的更新

這取決于執行情況。 例如，如果您使用API提取所有數據，然后過濾client-side，那么使用vuex是有意義的，因為您的組件將更新過濾器并獲得結果。在下面的圖中，load products是一個異步調用，它加載所有數據，然后應用程序對組件進行特定的過濾，并可能對其他組件可用。 如果您在每次過濾器更改時都進行調用，并且不需要在組件之間持久化或共享數據，那么使用它可能沒有什么好處。 請注意，vuex是一個有助于管理全局狀態的工具，由您決定應用程序中的數據是否能從中受益。

您應該可以訪問模塊名稱前面的state字段： const area = store.state.layers..areas[1]; 而不是 const area = store.layers.state.areas[1];

默認情況下，Axios只對200到300之間的HTTP狀態代碼拋出錯誤。 通過設置validateStatus，將Axios配置為也拋出422： axios.put('/api/settings', settings, { validateStatus: status => status >= 200 && status < 300 || status === 422}) 或者檢查正常回調中的狀態代碼： response = await axios.put('/api/settings', settings);if (response.status === 422) { // throw error}

未測試（我不使用VuexFire），但是假設bindFirestoreRef需要context對象，您也可以將rootGetters作為它的屬性來訪問。把這兩個片段放在一起會是這樣的： const actions = { loadPendingHoursRequests: firestoreAction((context) => { const uid = context.rootGetters['users/currentUserUID']; context.bindFirestoreRef('pendingHoursRequests', db.collection('hours') .where('submittedToUID', '==', uid)) })}

你需要從行動中做出承諾。有點像這樣： main.js (Store) import Vue from "vue";import App from "./App.vue";import Vuex from "vuex";Vue.config.productionTip = false;Vue.use(Vuex);const store = new Vuex.Store({ state: { something: 0 }, getters: { getSomething: (state) => state.something }, actions: { doSomethingAction: async ({ getters }) => { return await new Promise((resolve) => { // we return the promise to resolve it inside the component setTimeout(() => { return resolve(getters.getSomething); }, 1000); }); } }, mutations: { updateSomething(state) { state.something = 1; } }});new Vue({ store, render:

這個不行？ export const fetchCountries = async ({commit, dispatch}, form) => {

它是store.state.a而不是store.a.state的原因是Vuex中只有一個狀態對象。在引擎蓋下，所有模塊都組合成一個狀態對象。 Vuex文檔可以為您提供其他信息。

如果是vue2.x// 直接獲取this.$store.state.模塊名.feedBackDetails// 通過 gettersgetters: { getFeedBackDetails: state => state.feedBackDetails}// 通過映射函數mapState 或 mapGettercomputed() { ...mapState({ feedBackDetails: state => state.模塊名.feedBackDetails }) // 或者 ...mapGetter([ feedBackDetails: 'getFeedBackDetails' ])}// 直接this.feedBackDetails 調用mounted() { console.log(this.$store.state.模塊名.feedBackDetails) console.log(this.feedBackDetails)}如果是vue3.ximport { onMounted } from 'vue'import { useStore } from 'vuex'const store = useStore()onMounted(() => { console.log(store.feedBackDetails)})// 補充：獲取不到的話需要修改

您可以從一個模塊更改另一個模塊的狀態，但必須通過調用另一個模塊中的變異的操作來完成。首先，在產量模塊中創建一個突變： mutations: { statePRdate(state, input) { state.PRdate = input; }} 現在您可以使用分析模塊中的操作來提交當前模塊和另一個（yields）模塊中的突變。使用{ root: true }作為外部模塊commit的第三個參數。第一個參數將是mutationName或moduleName/mutationName，如果您的模塊具有名稱空間： actions: { analysisAction({ commit }, input) { commit('stateFetchParamsStart', input); // Commit in this module commit('statePRdate', input, { root: true }); // Commit in another module }} 啟動以下操作： this.$store.dispatch('analysisAction', 'input') Namespaced modules 如果您的模塊是命名空間的，那么您應該對提交和操作都使用命名空間語法： commit('yields/statePRdate', input, { root

存儲狀態屬性應作為計算屬性返回，請嘗試使用各自的名稱返回狀態： <template>{{tuto}}</template><script>export default {computed:{ tuto(){ return this.$store.state.tuto ; }, data(){ return this.$store.state.data ; }},mounted(){ this.$store.dispatch("getTutoriel");}}</script>

你可以這樣做： // src/plugins/auth.jsimport Vue from "vue";import store from "../store";Vue.prototype.$auth = { login() { store.dispatch("auth/LOGIN"); }, logout() { store.dispatch("auth/LOGOUT"); }}; 在main.js中，只需將導入添加到此文件： // src/main.js// imports...import "./plugins/auth.js";// code... 你可以這樣使用它： // src/components/Test.vue<script>export default { created() { this.$auth.login() }}</script> 示例源代碼：https://codesandbox.io/s/vuex-store-forked-pl01u

這方面有一個最佳實踐： 創建一個文件。那個名字是共享的 創建存儲文件夾并在其上創建模塊文件夾： 您應該在模塊文件夾中創建模塊，并為目標定義存儲： for example: import * as types from "../types";const state = { currentPage: {}};const getters = { [types.avatarManagement.getters.AVATAR_MANAGEMENT_GET]: state => { return state.currentPage; }};const mutations = { [types.avatarManagement.mutations.AVATAR_MANAGEMENT_MUTATE]: ( state, payload ) => { state.currentPage = payload; }};const actions = { [types.avatarManagement.actions.AVATAR_MANAGEMENT_ACTION]: ( { commit }, payload ) => { commit(types.avatarManagement.mutations.AVATAR_MANAGEMENT_MUTATE, payload); }};ex

更支持在路由器模塊中導入存儲，而不是反之亦然。您可以使用beforeEach導航衛士設置商店中的當前路線。首先，準備商店： store.js state: { route: null},mutations: { SET_ROUTE(state, route) { state.route = route; }},modules: { ... } 在路由器模塊中，使用beforeEach保護來存儲當前路由，即to參數： router.js import store from '@/store'; // Import the store in the router moduleconst router = new VueRouter({ ...})router.beforeEach((to, from, next) => { store.commit('SET_ROUTE', to); next();}); 要在Vuex模塊getter中訪問此路由，請通過第三個getter參數rootState訪問它： store/someModule.js getters: { getRoute(state, getters, rootState) { return rootState.route; }}

You can't. 它是異步的。 data值的導出發生在收到響應之前。 將從catch返回的承諾分配給data。 那你進口后再處理承諾。 const data = zlFetch('http://localhost:3000/new.json') .then(response => resonse.body) .catch(error => console.log(error));export default data; Later import newthing from './myModule';newthing.then(data => ...);