带有 Nuxt 错误的 Vuex：this.$store 未定义

Question

我正在与 Nuxt 课程一起编写代码，但我收到了以下错误，当然它在教程中也有效。

TypeError: can't access property "dispatch", this.$store is undefined

存储/index.js 文件：

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: { loadedPosts: [] },

    mutations: {
      setPosts(state, posts) {
        state.loadedPosts = posts;
      },
    },

    actions: {
      setPosts(vuexContext, posts) {
        vuexContext.commit("setPosts", posts);
      },
    },

    getters: {
      loadedPosts(state) {
        console.log("imhere");
        return state.loadedPosts;
      },
    },
  });
};

export default createStore;

posts/index.vue 文件中的script ：

<script>
export default {
  data() {
    return {
      loadedPosts: [{id: "1",title: "First Post"}],
    };
  },

  created() {
    this.$store.dispatch("setPosts", this.loadedPosts);
  },
};
</script>

Answer 1

首先，如果您有 store/index.js，则不必导入 vuex。 Nuxt 将查找存储目录。 如果它包含一个不是隐藏文件或 README.md 文件的文件，则该商店将被激活。 这意味着 Nuxt 将：

• 导入 Vuex。
• 将 store 选项添加到根 Vue 实例。

现在，如果由于某种原因未导入 vuex 和 store（如果在设置项目时您没有将任何 .js 文件放在 /store 中），则 $store 将不可用。 您可以在 .nuxt/index.js 文件夹中查看是否导入了 store 或 vuex。 如果未导入，您可以按照 4 种方法在 Nuxt 中正确设置 vuex。

方法一：根命名空间，一个文件

让我们从最简单的商店设置开始，一个文件。 如果你创建 /store/index.js，你可以用你的 state、mutations、actions 和 getter 来填充它。 使用此设置，没有名称空间，所有内容都存在于这个文件中。

// holds your root state
export const state = () => ({
  counter: 0
})

// contains your actions
export const actions = {
  counterUp({ state, commit }){
    commit('setCounter', state.counter + 1)
  }
}
// contains your mutations
export const mutations = {
  setCounter(state, value){
    state.counter = value
  }
}
// your root getters
export const getters = {
    myGetter(state){ return state.counter + 1000}
}

方法 2：根命名空间，每个意图一个文件

如果您的商店代码变得有点太大，您可以按意图拆分您的商店！ 只需删除您的 index.js 并为状态、操作、突变和 getter 创建文件。 Nuxt 将自动将它们构建为根命名空间中的一个存储。 从上面的示例中，我们只需将每个部分移动到自己的文件中并使用默认值

export.
// /store/state.js
export default () => ({
  counter: 0
})

// /store/actions.js
export default {
  counterUp({ state, commit }){
      commit('setCounter', state.counter + 1)
  }
}

// /store/mutations.js
export default{
  setCounter(state, val){
      state.counter = val
  }
}
// /store/getters.js
export default {
  myGetter(state){ return state.counter + 1000}
}

方法 3：命名空间，一个文件

如果您想在您的应用程序中使用命名空间，但仍需要一个文件作为空间，只需将您的单个文件命名为您希望其内容所在的命名空间。 如果我们从方法 1 中获取 index.js 并将其命名为 cart.js，那么所有的 getter、action、mutations 和 state 都将位于 cart 命名空间下。 要访问命名空间中的状态，只需在 state 属性之后使用命名空间名称的计算属性。

computed:{
  counter(){
    return this.$store.state.cart.counter
  }
}

如果您想在命名空间内执行操作，您将添加命名空间 + 斜杠 + 操作名称。

this.$store.dispatch('cart/counterUp')

方法 4：命名空间，每个意图一个文件

正如您可能已经猜到的那样，您也可以拥有一个命名空间存储，并且您的意图也可以拆分！ 如果我们采用方法 2 并将每个文件移动到一个名为 cart 的文件夹中，它将如下所示。