我可以從 Vuex 中的 getter 進行分派嗎

Question

小提琴：這里

我正在用 Vue 2 和 Vuex 創建一個 web 應用程序。 我有一個商店，我想從 getter 獲取狀態數據，我想要的是如果 getter 發現數據尚未填充，它會調用 dispatch 並獲取數據。

以下是我的 Vuex 商店：

const state = {
  pets: []
};

const mutations = {
  SET_PETS (state, response) {
    state.pets = response;
  }
};

const actions = {
 FETCH_PETS: (state) => {
      setTimeout(function() { 
            state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi'])
    }, 1000)
 }
}

const getters = {
    pets(state){
    if(!state.pets.length){
        state.dispatch("FETCH_PETS")
    }
    return state.pets
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

但我收到以下錯誤：

未捕獲的類型錯誤：state.dispatch 不是函數（...）

我知道我可以從 Vue 組件的beforeMount中做到這一點，但是我有多個組件使用相同的 Vuex 存儲，所以我必須在其中一個組件中執行此操作，應該是哪個組件以及它將如何影響其他組件。

Answer 1

Getters 無法調用 dispatch 因為它們傳遞的是state而不是商店的context

動作可以在傳遞上下文時調用狀態、分派、提交。

Getter 用於管理“派生狀態”。

如果您改為在需要它的組件上設置pets狀態，那么您只需從應用程序的根目錄調用FETCH_PETS並消除對 getter 的需要

Answer 2

我知道這是一篇較舊的帖子，我不確定這是否是好的做法，但我執行了以下操作以從我的商店模塊中的 getter 發送：

import store from "../index"

並像這樣使用我的吸氣劑中的商店：

store.dispatch("moduleName/actionName")

我這樣做是為了確保數據不存在時可用。

Answer 3

有同樣的問題..還希望所有 Vue-Instances 自動加載一些東西，並寫了一個 mixin：

store.registerModule('session', {
    namespaced: true,
    state: {
        session: {hasPermission:{}},
        sessionLoaded:false
    },
    mutations: {
        changeSession: function (state, value)
        {
            state.session = value;
        },
        changeSessionLoaded: function (state)
        {
            state.sessionLoaded = true;
        }

    },
    actions: {
        loadSession(context)
        {
            // your Ajax-request, that will set context.state.session=something
        }
    }
}); 

Vue.mixin({
    computed: {
        $session: function () { return this.$store.state.session.session; },
    },
    mounted:function()
    {
        if(this.$parent==undefined && !this.$store.state.session.sessionLoaded)
        {
            this.$store.dispatch("session/loadSession");
            this.$store.commit("changeSessionLoaded");
        }
    },
});

因為它每個 vue-instance 和 store 只加載一個並且它自動包含在每個 vue-instance 中，所以不需要在每個主應用程序中定義它

Answer 4

我使用 getter 來配置動態頁面。 本質上，是這樣的：

getter: {
  configuration: function () {
    return {
      fields: [
        {
          component: 'PlainText',
          props: {},
          setPropsFromPageState: function (props, pageState, store) {
            // custom logic
          }
        }
      ]
    };
  }
}

然后在頁面組件中，當我在動態組件上動態設置 props 時，我可以調用該組件的setPropsFromPageState(field.props, this.details, this.$store)方法，允許在配置中設置邏輯level 來修改傳入的 props 的值，或者在需要時提交/調度。

基本上，這只是一個存儲在 getter 中的回調函數，它在組件上下文中執行，並通過它訪問 $store。