初始化 VueX 存储不起作用

Question

我最近从 redux 切换到 VueX，似乎无法更新我的初始状态。我从后端调用一个 API 在我的主应用程序组件的 created(( 钩子中，该钩子返回初始化状态的数据。我可以看到网络请求以及数据，因此我知道正在调用该操作，但似乎没有调用突变或我的突变无法正常工作。我尝试在浏览器中调试，但由于某种原因，chrome 在添加断点时不允许我看到任何数据。我安装了 Vue devtools 扩展，除了基本状态之外看不到任何其他内容。

最好注意的是，我正在使用模块，并且我调用的操作与顶级/根级模块相关联。以下是我认为相关的文件：

总店

/* eslint-disable no-underscore-dangle */
import Vue from 'vue';
import Vuex from 'vuex';
import nandus from './nandus';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
nandus,
},
strict: process.env.NODE_ENV !== 'production',
});
export default store;

南都斯模块

import axios from 'axios';
import { FETCH_NANDU_DATA, ASYNC_FETCH_NANDU_DATA } from '@/constants/nandus';
import modal from './modal';
import pdf from './pdf';
import scores from './scores';
import sections from './sections';

export default {
state: {
wushuStyles: null,
nanduFormTypes: null,
movements: null,
movementCodes: null,
nandu: null,
connections: null,
},
actions: {
[ASYNC_FETCH_NANDU_DATA]: ({ commit }) => {
function success(response) {
commit(FETCH_NANDU_DATA, response.data);
}
function failure(error) {
const message = error.response ? error.response.data.message : error.message;
console.error(`XHR Failed for getNanduData: ${message}`);
}
return axios.get('/api/nandu')
.then(success)
.catch(failure);
},
},
mutations: {
[FETCH_NANDU_DATA]: (state, data) => ({ ...state, ...data }),
},
modules: {
modal,
pdf,
scores,
sections,
},
};

App.vue

import { mapActions } from 'vuex';
import store from '@/store';
import { ASYNC_FETCH_NANDU_DATA } from '@/constants/nandus';
export default {
name: 'app',
computed: {
...mapActions([
ASYNC_FETCH_NANDU_DATA,
]),
},
created() {
store.dispatch(ASYNC_FETCH_NANDU_DATA);
},
};

从 API 返回的示例数据

{
wushuStyles: ['A', 'B'],
nanduFormTypes: ['A', 'B'],
movements: ['A', 'B'],
movementCodes: ['A', 'B'],
nandu: ['A', 'B'],
connections: ['A', 'B'],
}

Answer 1

在突变中：

mutations: {
[FETCH_NANDU_DATA]: (state, data) => ({ ...state, ...data }),
},

正在返回一个新对象{ ...state, ...data }，但state永远不会发生突变。

更改以修改state应该可以解决此问题：

mutations: {
[FETCH_NANDU_DATA]: (state, data) => {
// mutate state
state = { ...state, ...data }
},
},

---

作为旁注，在执行Vue.use(Vuex)时，会将实例属性$store添加到所有 Vue 实例中。这意味着可以使用this.$store在 Vue 实例中访问存储。

例：

created() {
this.$store.dispatch(ASYNC_FETCH_NANDU_DATA);
},