最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Vuex, Nuxt: Unknown action type - Stack Overflow

programmeradmin5浏览0评论

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

  1. 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);
  },
};
  1. Writing actions/mutations in index.js

  2. 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

  1. 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);
  },
};
  1. Writing actions/mutations in index.js

  2. 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 badges
Add a ment  | 

1 Answer 1

Reset to default 9

Instead 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

发布评论

评论列表(0)

  1. 暂无评论