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

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

您应该将 ajax 请求移动到 actions 中，它可以是异步的。您在 action 中获取数据，提交变异将接收到的数据作为有效负载，变异为状态属性.

分配一个值

或者，您可以在组件方法中进行异步请求，并直接为商店属性赋值：this.$store.state.prop = value

Answer 2

在商店中，您可以通过操作异步加载数据，然后使用突变提交更改。

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>

VueJS - Vuex 在突变中分配数据

VueJS - Vuex Assign data in a mutation

vue.js

vuex