初始化 VueX 商店不工作
Initializing VueX Store Not Working
我最近从 redux 切换到 VueX,似乎无法更新我的初始状态。我在主 App 组件的 created() 挂钩中从后端调用 API 初始化状态的 returns 数据。我可以看到网络请求和数据,所以我知道正在调用操作,但似乎没有调用突变或者我的突变没有正常工作。我试过在浏览器中调试,但由于某些原因 chrome 在我添加断点时不让我看到任何数据。我安装了 Vue devtools 扩展,但除了基本状态外什么都看不到。
注意到我正在使用模块,并且我正在调用的操作与顶级 level/root 级别模块相关联,这可能很好。以下是我认为相关的文件:
总店
/* 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'],
}
突变中:
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)
时,一个 instance property $store
被添加到所有 Vue 实例。这意味着可以在 Vue 实例中使用 this.$store
.
访问商店
示例:
created() {
this.$store.dispatch(ASYNC_FETCH_NANDU_DATA);
},
我最近从 redux 切换到 VueX,似乎无法更新我的初始状态。我在主 App 组件的 created() 挂钩中从后端调用 API 初始化状态的 returns 数据。我可以看到网络请求和数据,所以我知道正在调用操作,但似乎没有调用突变或者我的突变没有正常工作。我试过在浏览器中调试,但由于某些原因 chrome 在我添加断点时不让我看到任何数据。我安装了 Vue devtools 扩展,但除了基本状态外什么都看不到。
注意到我正在使用模块,并且我正在调用的操作与顶级 level/root 级别模块相关联,这可能很好。以下是我认为相关的文件:
总店
/* 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'],
}
突变中:
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)
时,一个 instance property $store
被添加到所有 Vue 实例。这意味着可以在 Vue 实例中使用 this.$store
.
示例:
created() {
this.$store.dispatch(ASYNC_FETCH_NANDU_DATA);
},