在 Vuex 中使用 NuxtJS Strapi 模块

Question

我使用@nuxt/strapi周围的包装Strapi为NuxtJS 。 对于 Nuxt 中的 Vuex，我使用的是命名空间模块模式，所以我的结构看起来像这样：

store
├── user.js
├── posts.js
└── index.js

在Vue项目中，我会导入 Vue、Vuex 或 Axios，然后创建一个 store 实例const store = new Vuex.Store(storeOptions)并分派我的初始操作或从store/index.js内部进行一些 API 调用。

vue 项目中 index.js 的示例：

import Vuex from 'vuex';
import Vue from 'vue';
import user from './modules/user'
import posts from './modules/posts'
Vue.use(Vuex);
const storeOptions = { ... }
const store = new Vuex.Store(storeOptions)

if (user) {
  ...
  store.dispatch('startPageLoading', 'store');
  store.commit('SET_USER', user);
  await store.dispatch("getSomeData");
  ...
}

但是在 Nuxt 项目中，商店和 Strapi 实例已经在root_project/.nuxt/...中创建。 那么在store/index.js使用 $strapi 和 $store 的最佳方法是什么？ $strapi或$store在store/index.js都不可用

Answer 1

打开/刷新页面后，在服务器端执行此nuxtServerInit操作。

你只能在index.js文件中做

这就是你的 index.js 的样子：

//index.js
export const state = () => ({
   someState: false
})


export const mutations = {
  SOME_MUTATION(state, payload) {
    ...
  }
}

export const actions = {
  SOME_ACTION({ state, commit }, payload) {
     ...
  },
  nuxtServerInit({ commit }, { $strapi }){
     //do here something on the server side...
  }
}

该文档说，如果您将trapi 模块添加到您的项目中，您应该能够从上下文访问它。 上下文是来自nuxtServerInit的第二个参数

就是这样。 这就是商店的样子，没什么特别的。

你可以从任何组件发送/提交一些东西

this.$store.commit("SOME_MUTATION")

他们说它的全局可用this.$strapi

这个模块全局注入了 $strapi 实例，这意味着你可以在任何地方使用 this.$strapi 访问它。 对于插件，asyncData、fetch、nuxtServerInit 和 Middleware，你可以从 context.$strapi 访问它。