javascript - Vuex 不检测动作或突变,但检测 getter 很好
问题描述
我正在尝试在我的 Vue 应用程序中设置 Vuex。
应用程序.js
require('./bootstrap');
window.Vue = require('vue').default;
import Vuex from "vuex";
Vue.use(Vuex);
import storeData from "./store";
const store = new Vuex.Store(
storeData
)
Vue.component('home', require('./components/Home.vue').default);
const app = new Vue({
el: '#app',
store
});
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const state = {
members: [],
};
export const getters = {
members: state => () => {
return state.members;
}
};
export const actions = {
async getMembers({ commit, state, dispatch }){
const res = await this.$axios.get('getMembers');
const { data } = await res;
commit('setMembers', data);
}
};
export const mutations = {
setMembers(state, members){
state.members = members;
},
};
export default new Vuex.Store({
state,
getters,
actions,
mutations
});
主页.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Home</div>
<div class="card-body">
{{ members }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
mounted() {
this.getMembers();
},
computed: {
...mapGetters({
members: 'members'
})
},
methods: {
...mapActions({
getMembers: 'getMembers'
})
}
}
</script>
主页显示有关问题的“成员”吸气剂。我在开发人员工具中将其视为一个空数组,如果我将其设置为其他任何内容,它将显示它。但是,如果我尝试进行突变,它不会检测到动作或突变。例如,动作说:“[vuex] 未知动作类型:getMembers” 知道是什么原因造成的吗?
解决方案
使用 初始化存储两次new Vuex.Store
,第二次为构造函数提供存储实例,这会导致错误。
它是从 store.js 导出的store,而不是store data。
有可能:
const store = new Vuex.Store({
state,
getters,
actions,
mutations
});
export default store;
然后很明显,它是从 store.js 导出的 store 实例。
Vue.use(Vuex)
也被调用了两次,这可能不会导致除了警告之外的问题,因为 Vue 插件通常包含防止多次初始化的保护措施。store.js 不需要包含它,通常在应用程序入口点初始化插件。
这是一个潜在的错误:
require('./bootstrap');
window.Vue = require('vue').default;
import Vuex from "vuex";
...
根据规范提升导入,此行为取决于设置,但不应期望此代码将按此顺序进行评估。
需要是:
import './bootstrap';
import Vue from "vue";
import Vuex from "vuex";
import store from "./store";
window.Vue = Vue;
...
推荐阅读
- python-3.x - 可以在 ThreadPoolExecutor 中给出的 max_workers 的最大值是多少?
- sql-server - SQL Server 用字母和数字对 VARCHAR 进行排序
- python - 如何将对象的pk传递给模板表单
- javascript - 如何将函数影响到javascript中的变量
- c - 如何用按钮切换字符串
- dart - 如何读取分块流的一部分
- amazon-web-services - AWS::Serverless::HttpApi 最低 TLS 版本
- python - 自变量范围内的最大值和最小值
- paypal - 未调用 PayPal IPN 挂钩
- c++ - 带有运算符“<=>”的 C++ 模板类错误(错误 C2678)