时间戳

首页 > 解决方案 > 初始化 VueX 存储不起作用

vue.js - 初始化 VueX 存储不起作用

问题描述

我最近从 redux 切换到 VueX，似乎无法更新我的初始状态。我在我的主 App 组件的 created() 挂钩中从后端调用一个 API，该 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;

南都模块

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,
  },
};

应用程序.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'],
}

标签： vue.jsvuexvuex-modules

解决方案

在突变中：

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

{ ...state, ...data }正在返回一个新对象，但state从未发生变异。

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

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

附带说明一下，在执行Vue 时，会为所有 Vue 实例添加Vue.use(Vuex)一个实例属性。 $store这意味着可以在 Vue 实例中使用this.$store.

例子：

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

推荐阅读