VueJS - Vuex分配突變數據

我已經習慣了Vuex，因爲我需要能夠擁有一個商店，當另一個組件發生變化時，我可以輕鬆訪問和更新商店。VueJS - Vuex分配突變數據

目前，我store如下所示：

import vue from 'vue'; 
import Vuex from 'vuex'; 

vue.use(Vuex); 

export default new Vuex.Store({ 
    state: { 
     users: { 

      columns: [], 
      model: [], 

     } 
    }, 

    mutations: { 
     fetchUsers: function(state) { 
      axios.get(`/users?search_input=`) 
      .then(function(response) { 


      }); 
     } 
    } 

});

的columns和model動態下降從一個Ajax請求拉着我的Users如下所示：

<script> 

    export default { 

    mounted() { 
     this.$store.commit('fetchUsers'); 
    }, 
    computed: { 
     columns() { 
      return this.$store.state.users.columns; 
     } 

     model() { 
      return this.$store.state.users.model 
     } 
    }, 
    } 

</script>

我的問題是該應用程序需要從Ajax預裝數據。例如columns從fetchUsers中的ajax請求中設置，在Users中我使用this.$store.commit('fetchUsers');，但是有沒有其他方法可以在不使用商店本身的情況下使用commit？

來源

2017-05-05 Phorce

Vuex [突變]（https://vuex.vuejs.org/en/mutations.html）** **發生變異的狀態 - 這是您對狀態進行更改的地方 - 它們始終是同步的。 Vuex [actions]（https://vuex.vuejs.org/en/actions.html）會執行諸如網絡請求等_things_來獲取數據 - 它們可以是異步的。一旦你發送一個動作，你需要通過一個變種來提交它。 – wing

在商店u能異步加載烏爾數據經由操作然後提交使用突變的變化。

import vue from 'vue'; 
import Vuex from 'vuex'; 

vue.use(Vuex); 

export default new Vuex.Store({ 
    state: { 
     users: { 
      columns: [], 
      model: [], 

     } 
    }, 

    actions: { 
     fetchUsers: function(context) { 
       axios.get(`/users?search_input=`) 
       .then(function(response) { 

        context.commit("FETCHUSERS", { 
        columns: response.columns, 
        model: response.model 
        }); 
       }); 
     } 
    } 
    mutations: { 
     FETCHUSERS: function(state, payload) { 
       state.users.columns = payload.columns; 
       state.users.model = payload.model; 
     } 
    } 

});

調度從所述部件的動作

<script> 

export default { 

    ..... 
    methods: { 
     fetchUsers: function() { 
      this.$store.dispatch("fetchUsers"); 
     } 
    }

來源

2017-05-05 16:10:07

突變必須是同步的：https://vuex.vuejs.org/en/mutations.html

你應該將Ajax請求爲actions，它可以是異步。您獲取action中的數據，提交將接收到的數據作爲有效內容的突變，並且突變將一個值分配給狀態屬性。

或者，也可以使在組件的方法異步請求，並分配一個值到存儲庫屬性直接：this.$store.state.prop = value

來源

2017-05-05 15:16:29 wostex

有沒有關於vuex/vuejs中的'actions'的任何文檔 - 我找不到關於這個 – Phorce

的任何文檔我建議通讀關於突變的所有文檔頁面，然後繼續操作：https ：//vuex.vuejs.org/en/actions.html突變旨在同步變異數據，並且動作旨在執行異步任務。 – wostex

我添加了以下內容：'actions {fetchUsers（context）{}}'然後在我的組件中執行：'this。$ store.dispatch（'fetchUsers'）;'但是出現錯誤：'Unknown Mutation type：fetchUsers ' – Phorce

VueJS - Vuex分配突變數據

回答

相關問題