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分配突变数据

回答

相关问题