Question

我最近从redux切换到VueX，似乎无法让我的初始状态更新。我在我的主App组件的created（）钩子中从后端调用API，该钩子返回初始化状态的数据。我可以看到网络请求和数据，所以我知道正在调用该动作，但看起来要么没有调用突变，要么我的突变没有正常工作。我已尝试在浏览器中进行调试，但由于某些原因，当我添加断点时，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;

Nandus模块

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)时，会向所有Vue实例添加instance property $store。这意味着可以使用this.$store在Vue实例中访问商店。

示例：

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

初始化VueX存储不起作用

1 个答案: