example
dsv
./store/index.js
let store = new Vuex.Store({
state: {
editorId: 0
},
mutations: {
changeEditor(state, editor) {
state.editorId = editor.id;
}
},
});
./store/modules/text.js
createTextModule = function() {
return {
state: {
content: ""
}
getters: {
content: (state) => state.content,
},
mutations: {
changeContent: (state, content) => state.content = content
},
namespaced: true
}
}
./components/TextEditor.vue
let editor = new Vue.component({
name: 'text-editor',
computed: {
id() {
return this.$store.state.editorId;
},
content: {
get() {
return this.$store.getters[`textModule/${this.id}/content`]
},
set(value) {
this.$store.commit(`textModule/${this.id}/changeContent`, value);
}
}
},
methods: {
changeId(val) {
this.id = val;
}
}
})
./components/Text.vue
let textBlock = new Vue.component({
props: {
id: {
type: Number,
required: true
}
},
computed: {
content() {
return this.$store.getters[`textModule/${this.id}/content`];
}
},
methods: {
changeEditor() {
this.$store.commit("changeEditor", {
name: "textEditor",
id: this.id
});
}
}
})
./components/App.vue
<template v-for="c in controls">
<component :is="c.name" :id="c.id" :key="c.id"></component>
</template>
<script>
import Vue from 'vue'
import TextEditor from "./TextEditor.vue"
import TextBlock from "./Text.vue"
import { createTextModule } from "../store/modules/text"
export default {
name: 'app',
data() {
return {
counter: 0,
controls: []
}
},
computed: {
editor() {
return this.$store.state.editor
}
},
methods: {
addText() {
if (this.counter !== this.controls.length) {
this.counter = this.controls.length;
}
this.$store.registerModule(`textModule/${this.counter}`, createTextModule());
this.controls.push({
name: "textBlock",
id: this.counter++
});
},
},
components: {
"textEditor": TextEditor,
TextBlock
}
}
</script>