如何将 Vuex 集成到 Storyblok 插件中？答案

【问题标题】：How can I integrate Vuex into a Storyblok plugin?如何将 Vuex 集成到 Storyblok 插件中？
【发布时间】：2021-09-10 03:34:27
【问题描述】：

我正在使用 vue 为 storyblok 构建一个插件。我决定将状态管理添加到插件而不是$emit() 的回声室一直备份组件树会更容易。我将 Vuex 安装到我的插件中，然后按照 Vuex 教程中的说明将其添加到 main.js 文件中，但是我的 main.js 文件没有像常规 Vue 应用程序的 main.js 文件那样设置。

教程告诉我们这样做

import Vue from 'vue'
import App from './App.vue'
import store from './store' //our Vuex store

Vue.config.productionTip = false

new Vue({
    store, //passing in our store
    render: h =>(App)
}).$mount('#app')

但是我的 main.js 文件由于是一个故事块插件看起来像这样

import Plugin from './Plugin.vue'
import store from './store'  //I have no clue where to put this in the code below :(

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

}

正如您所见，设置完全不同，因为它旨在将 Vue 组件作为插件注入 storyblok，而不是设置新的 Vue 应用程序。有人知道我应该在这里做什么吗？

【问题讨论】：

我建议您使用不同的状态库，而不会产生 Vue 开销。我可以推荐 DiffX。很棒，带有一个非常好的浏览器扩展。 github.com/jbjorge/diffx/tree/master/core（如果需要，您可以将其用作节点包，甚至可以直接从脚本标记中用作window.diffx：<script src="https://unpkg.com/@diffx/core@2.0.3/dist/diffx.umd.min.js"></script>。
DiffX 有多大的社区？我已经被很多人不知道的事情搞得不知所措，无法帮助我解决问题。
不清楚该商店应该如何使用。它会与其他组件一起使用吗？我不处理 Storyblok，但很明显，全局实例正在使用中，所以它是 window.Storyblok.vue.use(store)。该代码使用 Vue 2 和全局变量。见github.com/storyblok/storyblok-vue/issues/7。 Vuex 并不是 $emit 的唯一替代品。你可能根本不需要 Vuex。 Vue 已经拥有建立自己的全局存储所需的一切 - 提供/注入和反应对象。
我碰巧认识 DiffX 的创建者，这是一个非常聪明的人的新项目，他对问题（我的和其他人的）非常敏感，我敢打赌你会直接从创建者那里得到答案如果您在 GitHub 存储库上提出问题，请立即使用。
@EstusFlask 感谢您提供的信息。昨晚我研究了它，看到了我们如何使用组合 API 来构建它。但是，我没有发现他们将多个模块链接到一个主模块中的任何内容。我已经看到模块的示例基本上被隔离为一堆微型商店，但没有捆绑在一起。你会碰巧知道任何例子吗？

标签： javascript vue.js vuex storyblok

【解决方案1】：

我解决了这个问题，在main.js 这一行中添加：window.Storyblok.vue.$store = store;

然后在您调用商店时在您的插件中使用相同的方法。例如： window.Storyblok.vue.$store.commit()

【讨论】：