VUEJS- VUEX在突变中分配数据

Question

我已经习惯了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？

Answer 1

在商店中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" );
      }
    }
  }
</script>

Answer 2

突变必须同步：https：//vuex.vuejs.org/en/mutations.html

您应该将AJAX请求移至actions，这可以是异步。您可以在action中获得数据，提交突变将接收到的数据作为有效载荷，并为状态属性分配一个值。

另外，您可以在组件方法中提出异步请求，并直接为商店属性分配一个值： this.$store.state.prop = value