improvement: 添加vuex，添加编辑器实验界面，enter键创建新block实验，输入内容“双向绑定”实验

src/App.vue

@@ -16,5 +16,4 @@ body {
 </style>
 
 <style lang="scss" scoped>
-
 </style>

src/components/EditableItem.vue

@@ -1,24 +1,40 @@
 <template>
   <section>
-    <div contenteditable @input.stop="changeValue">
-      {{ content }}
-    </div>
-    {{ content }}
+    <div
+      contenteditable
+      @keydown.stop="handleKeyDown"
+      :v-html="innerContent"
+    ></div>
+    输入的内容为：{{ innerContent }}
   </section>
 </template>
 
 <script>
+import { CREATE_ITEM_AFTER } from '../store/types/editor-types'
 export default {
   name: 'editable-item',
-  props: ['tagName', 'content'],
-  data: () => {
+  props: ['id', 'tagName', 'content'],
+  data: function() {
     return {
-      content: '123'
+      innerContent: this.content
     }
   },
   methods: {
-    changeValue: function(e) {
-      this.content = e.target.innerText
+    handleKeyDown(e) {
+      console.log(e.key)
+
+      switch (e.key) {
+        case 'Enter':
+          e.preventDefault()
+          this.$store.commit(CREATE_ITEM_AFTER, { id: this.id })
+          break
+
+        default:
+          requestAnimationFrame(() => {
+            this.innerContent = e.target.innerText
+          })
+          break
+      }
     }
   }
 }

src/store/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import editor from './modules/editor'
 
 Vue.use(Vuex)
 
@@ -7,5 +8,7 @@ export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {}
+  modules: {
+    editor: editor
+  }
 })

src/store/modules/editor.js

@@ -0,0 +1,26 @@
+import {
+  CREATE_ITEM_AFTER
+} from '../types/editor-types'
+import uuid from 'uuid'
+
+export default {
+  namespace: true,
+  state: {
+    editableItems: [{
+      id: uuid.v4(),
+      tagName: 'div',
+      content: '2'
+    }]
+  },
+  mutations: {
+    [CREATE_ITEM_AFTER](state, payload) {
+      state.editableItems = [...state.editableItems, {
+        id: uuid.v4(),
+        tagName: 'div',
+        content: '2'
+      }]
+    }
+  },
+  actions: {},
+  getters: {}
+}

src/store/types/editor-types.js

@@ -0,0 +1,3 @@
+export const INIT_BY_SPECIFIC_ITEMS = 'initBySpecialItems'
+export const CREATE_ITEM_AFTER = 'createItemAfter'
+export const REMOVE_ITEM_BEFORE = 'removeItemBefore'

src/views/editor/Editor.vue

@@ -3,6 +3,7 @@
     <template v-for="item in editableItems">
       <editable-item-vue
         :key="item.id"
+        :id="item.id"
         :tagName="item.tagName"
         :content="item.content"
       />
@@ -12,16 +13,21 @@
 
 <script>
 import EditableItemVue from '../../components/EditableItem.vue'
+import { mapState } from 'vuex'
 export default {
   name: 'editor',
-  data: () => {
-    return {
-      editableItems: [{ id: '', tagName: 'div', content: '2' }]
-    }
-  },
   components: {
     EditableItemVue
-  }
+  },
+  data: function() {
+    return {}
+  },
+  computed: {
+    ...mapState({
+      editableItems: state => state.editor.editableItems
+    })
+  },
+  created() {}
 }
 </script>