如何将Vuex正确集成到基于Vue开发的Storyblok插件项目中？

正确的注册方式是将store直接注入到你的插件组件配置中，无需单独初始化Vue根实例，修改后的完整代码如下：

import Plugin from './Plugin.vue'
import store from './store'

// 核心操作：给插件组件配置挂载store属性
Plugin.store = store

if (process.env.NODE_ENV == 'development') {
  window.Fieldtype = Plugin
  let customComp = window.Storyblok.vue.extend(window.Fieldtype);
  window.Storyblok.vue.component('custom-plugin', customComp);
  window.StoryblokPluginRegistered = true;
} else {
  let init = Plugin.methods.initWith() 
  window.storyblok.field_types[init.plugin] = Plugin
}

原理解释 #

• 开发环境下，你调用window.Storyblok.vue.extend()生成组件构造函数时，会自动继承组件配置中的store属性，和常规Vue项目在new Vue()时传入store的效果完全一致，所有子组件都可以通过this.$store正常访问Vuex实例。
• 生产环境下Storyblok会自动初始化你的插件组件，提前挂载到组件配置上的store属性会被自动识别注入。

修改完成后即可在插件所有组件中按常规Vuex用法使用，没有其他额外配置。

内容的提问来源于stack exchange，提问作者Optiq