[英]How can I integrate Vuex into a Storyblok plugin?
I'm building a plugin for storyblok with vue.我正在用 vue 为 storyblok 构建一个插件。 I decided it would be easier to add state management to the plugin rather than an echo chamber of
$emit()
all the way back up the component tree.我决定将 state 管理添加到插件而不是
$emit()
的回声室一直备份组件树会更容易。 I installed Vuex into my plugin and went to add it to the main.js
file as instructed in a Vuex tutorial however my main.js
file isn't set up like a regular Vue app's main.js
file.我将 Vuex 安装到我的插件中,然后按照 Vuex 教程中的说明将其添加到
main.js
文件中,但是我的main.js
文件没有像常规 Vue 应用程序的main.js
文件那样设置。
The tutorial tells us to do this本教程告诉我们这样做
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')
However my main.js
file due to being a storyblok plugin looks like this但是,由于是 storyblok 插件,我的
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
}
As you can see the setup is totally different as it's geared towards injecting a Vue component into storyblok as a plugin rather than setting up a new Vue app.如您所见,设置完全不同,因为它旨在将 Vue 组件作为插件注入 storyblok,而不是设置新的 Vue 应用程序。 Does anybody know what I should do here?
有人知道我应该在这里做什么吗?
I solve that issue adding in the main.js
this line: window.Storyblok.vue.$store = store;
我解决了这个问题,在 main.js 中添加了这一行:
main.js
window.Storyblok.vue.$store = store;
Then in your plugin when you call the store use the same.然后在您调用商店时在您的插件中使用相同的方法。 For example:
window.Storyblok.vue.$store.commit()
例如:
window.Storyblok.vue.$store.commit()
So I am still learning StoryBlok and their plugin development, so please yell at me if this is wrong.所以我还在学习 StoryBlok 和他们的插件开发,所以如果这是错误的,请对我大喊大叫。
I was able to solve this like so.我能够像这样解决这个问题。
Just for some context this is my general folder structure.仅在某些情况下,这是我的一般文件夹结构。
.
└── my-app/
├── node_module/
│ └── ...
├── public/
│ └── index.html
└── src/
├── store/
│ ├── state.js
│ └── config.js
├── main.js
└── Plugin.vue
main.js main.js
import Vuex from 'vuex'
window.Storyblok.vue.use(Vuex); // This has to come before the Plugin import
import Plugin from './Plugin.vue'
if (process.env.NODE_ENV == 'development') {
window.Fieldtype = Plugin
let customComp = window.Storyblok.vue.extend(window.Fieldtype);
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
}
Plugin.vue插件.vue
import Vuex from 'vuex';
import State from './store/state';
const store = new Vuex.Store(State);
export default {
name: 'my-vue-plugin',
mixins: [window.Storyblok.plugin],
store: store,
components: {},
data() {
return {}
},
};
state.js state.js
import Config from './config';
export default {
modules: {
Config
},
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
};
Then anywhere in your nested components or whatever you can call the increment
mutation like so this.$store.commit('increment');
然后在你的嵌套组件中的任何地方或任何你可以调用
increment
突变的地方,像这样this.$store.commit('increment');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.