admin管理员组文章数量:1336633
I'm building a simple app using nuxt + vuex. When miting/dispatching I constantly get error "unknown action/mutation type: name". Also my mutations and actions don't display in vue devtools. On the other hand getters and state displaying as they should be.
store/products.js:
import getProducts from "~/api/products";
export const state = () => ({
all: [{ isAvailable: false }, { isAvailable: true }],
});
export const getters = {
available(state) {
return state.all.filter((p) => p.isAvailable);
},
};
export const actions = {
async fetchProducts(context) {
const response = await getProducts(true);
const products = await response.json();
contextmit("setProducts", products);
},
};
export const mutations = {
setProducts(state, products) {
state.products = products;
},
};
pages/products/index.vue
<template>
<div class="container"></div>
</template>
<script>
export default {
async created() {
await this.$store.dispatch("fetchProducts");
},
};
</script>
<style lang="scss" scoped></style>
What I've tried
- Writing actions/mutations as following via arrow function
export const actions = {
fetchProducts: async (context) => {
const response = await getProducts(true);
const products = await response.json();
contextmit("setProducts", products);
},
};
Writing actions/mutations in index.js
Copied example from docs. State is working, mutations don't.
All above mentioned points didn't work. Any Ideas?
I'm building a simple app using nuxt + vuex. When miting/dispatching I constantly get error "unknown action/mutation type: name". Also my mutations and actions don't display in vue devtools. On the other hand getters and state displaying as they should be.
store/products.js:
import getProducts from "~/api/products";
export const state = () => ({
all: [{ isAvailable: false }, { isAvailable: true }],
});
export const getters = {
available(state) {
return state.all.filter((p) => p.isAvailable);
},
};
export const actions = {
async fetchProducts(context) {
const response = await getProducts(true);
const products = await response.json();
context.mit("setProducts", products);
},
};
export const mutations = {
setProducts(state, products) {
state.products = products;
},
};
pages/products/index.vue
<template>
<div class="container"></div>
</template>
<script>
export default {
async created() {
await this.$store.dispatch("fetchProducts");
},
};
</script>
<style lang="scss" scoped></style>
What I've tried
- Writing actions/mutations as following via arrow function
export const actions = {
fetchProducts: async (context) => {
const response = await getProducts(true);
const products = await response.json();
context.mit("setProducts", products);
},
};
Writing actions/mutations in index.js
Copied example from docs. State is working, mutations don't.
All above mentioned points didn't work. Any Ideas?
Share edited Oct 27, 2020 at 22:08 Neistow asked Oct 27, 2020 at 21:44 NeistowNeistow 1,2441 gold badge10 silver badges22 bronze badges1 Answer
Reset to default 9Instead of await this.$store.dispatch("fetchProducts")
, could you try doing:
await this.$store.dispatch("products/fetchProducts");
Since products is a Vuex module, to access it in actions, you must use module/actionName
.
About the modules not showing up in vue-devtools, could you make sure your nuxt.config.js
has the following:
export default {
mode: 'spa',
devtools: true //<--------- make sure this is set to true
}
Please see this thread as well where people explain their own experiences using different versions of Vue - vue-devtools always disabled with nuxt.js
本文标签: javascriptVuexNuxt Unknown action typeStack Overflow
版权声明:本文标题:javascript - Vuex, Nuxt: Unknown action type - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742263638a2442978.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论