我已经习惯了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
最好在商店本身?
在商店中,您可以通过操作异步加载数据,然后使用突变提交更改。
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>
突变必须是同步的:https://vuex.vuejs.org/en/mutations.html
您应该将ajax请求移动到actions
,它可以是异步的。您在action
中获取数据,提交突变,将接收到的数据作为有效负载,并且突变为state属性分配值。
或者,您可以在组件方法中生成异步请求,并直接为store属性赋值:this.$store.state.prop = value