Vuex, Nuxt:알 수 없는 작업 유형

Vuex, Nuxt:알 수 없는 작업 유형

nuxt + vuex를 사용하여 간단한 앱을 만들고 있습니다.커밋/디스패치 시 "알 수 없는 액션/변환 유형: 이름" 오류가 계속 발생합니다.또한 vue devtools에는 내 돌연변이와 동작이 표시되지 않습니다.반면 게터 및 상태 표시는 정상입니다.

store/products.syslog:

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.commit("setProducts", products);
  },
};

export const mutations = {
  setProducts(state, products) {
    state.products = 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>

내가 시도한 것

1. 화살표 기능을 통해 다음과 같은 동작/변화 작성

export const actions = {
  fetchProducts: async (context) => {
    const response = await getProducts(true);
    const products = await response.json();
    context.commit("setProducts", products);
  },
};

2. index.js에 액션/변화를 쓰는 중

3. 문서에서 예제를 복사했습니다.상태는 정상이고 돌연변이는 그렇지 않아

위에 언급된 모든 사항들이 효과가 없었습니다.아이디어 있어요?

대신await this.$store.dispatch("fetchProducts"), 다음을 시도해 볼 수 있습니까?

await this.$store.dispatch("products/fetchProducts");

제품은 Vuex 모듈이기 때문에 동작으로 액세스하려면module/actionName.

vue-devtools에 모듈이 표시되지 않는 것에 대해 다음 사항을 확인해 주시겠습니까?nuxt.config.js에는 다음이 있습니다.

export default {
  mode: 'spa',
  devtools: true //<--------- make sure this is set to true
}

다른 버전의 Vue를 사용한 경험에 대해서도 설명합니다.vue-devtools는 항상 nuxt.js로 비활성화되어 있습니다.

언급URL : https://stackoverflow.com/questions/64563322/vuex-nuxt-unknown-action-type