Vuex with Nuxt Error: this.$store is undefined

Question

我在编写 Nuxt 课程时遇到了以下错误，当然它在教程中有效。

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

store/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。
将存储选项添加到根 Vue 实例。

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

方法一：根名称space，一个文件

让我们从最简单的商店设置开始，一个文件。如果你创建 /store/index.js，你可以用你的状态、突变、动作和吸气剂来填充它。使用此设置，没有名称space，一切都在这个文件中。

// 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：根名称space，每个 Intent 一个文件

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

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}
}

方法三：名称spaced，一个文件

如果您想在您的应用中使用 namespaces，但仍需要单个文件作为 space，只需将您的单个文件命名为 namespace倒是喜欢它的内容。如果我们从方法 1 中获取 index.js 并将其命名为 cart.js，那么所有的 getter、动作、突变和状态都将位于购物车名称 space 下。要访问名称space 中的状态，只需在状态属性.

之后使用带有名称space 名称的计算属性

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

如果你想在名称space中执行一个动作，你可以添加名称space + 斜线 + 动作名称。

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

方法 4：名称spaced，每个 Intent 一个文件

正如您可能已经猜到的那样，您也可以拥有一个名称spaced 商店，您的意图也可以分开！如果我们采用方法 2 并将每个文件移动到一个名为 cart 的文件夹中，它看起来像这样。

Vuex with Nuxt Error: this.$store is undefined

Vuex with Nuxt Error: this.$store is undefined

vue.js

nuxt.js

vuex