0

我@nuxt/strapi用作. Strapi_ NuxtJS对于 Nuxt 中的 Vuex，我使用的是命名空间模块模式，所以我的结构看起来像这样的示例：

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

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

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 项目中，商店和 strpi 实例已经在root_project/.nuxt/.... 那么在里面使用 $strapi 和 $store 的最佳方法是什么store/index.js？既不可用，$strapi也不$store可用store/index.js

4

1 回答 1

0

打开/刷新页面后，此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...
  }
}

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

而已。这就是商店的样子，没有什么花哨的。

你可以从任何组件调度/提交一些东西

this.$store.commit("SOME_MUTATION")

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

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

于 2020-10-13T13:01:45.760 回答