frontend/src/store/modules/editor.js

import {
  INIT_BY_STATE,
  INIT_BY_DEFAULT,
  ADD_ITEM_AFTER,
  MODIFY_ITEM,
  DELETE_ITEM,
  SET_FOCUS,
  SET_FOCUS_BEFORE,
  SET_FOCUS_AFTER,
  USE_FOCUS,
  GET_SLIDE,
  CREATE_SLIDE
} from '../types/editor-types'

import uuid from 'uuid'
import {
  getSlide,
  createSlide
} from '@/server/slide'

export default {
  state: {
    slideInfo: {},
    items: [],
    focus: null
  },

  mutations: {
    [INIT_BY_STATE](state, payload) {},
    [INIT_BY_DEFAULT](state, payload) {
      const newItemId = uuid.v4()
      state.items = [{
        id: newItemId,
        placeholder: '未编辑文档标题',
        content: '# '
      }]
      state.focus = {
        focusId: newItemId,
        offset: 0
      }
      state.slideInfo = { ...payload }
    },
    [ADD_ITEM_AFTER](state, payload) {
      const index = state.items.indexOf(state.items.filter(item => item.id === payload.id)[0])

      state.items = [
        ...state.items.slice(0, index + 1), {
          id: uuid.v4(),
          content: '',
          placeholder: '正文'
        },
        ...state.items.slice(index + 1)
      ]
    },
    [MODIFY_ITEM](state, payload) {
      state.items = [...state.items.map(item => {
        if (item.id === payload.id) {
          return {
            ...item,
            ...payload.diff
          }
        } else {
          return item
        }
      })]
    },
    [DELETE_ITEM](state, payload) {
      state.items = [...state.items.filter((item, index) => index === 0 || item.id !== payload.id)]
    },
    [SET_FOCUS](state, payload) {
      state.focus = {
        ...state.focus,
        ...payload.diff
      }
    },
    [SET_FOCUS_AFTER](state, payload) {
      let focusId = ''
      let tagetedFlag = false
      const isHit = state.items.some(item => {
        if (tagetedFlag) {
          focusId = item.id
          return true
        }
        if (item.id === payload.focusId) {
          tagetedFlag = true
        }
        return false
      })

      if (isHit) {
        state.focus = {
          focusId: focusId,
          offset: payload.offset ? payload.offset : 0
        }
      } else {
        // todo warn
      }
    },
    [SET_FOCUS_BEFORE](state, payload) {
      let focusId = ''
      let tagetedFlag = false
      const isHit = [...state.items].reverse().some(item => {
        if (tagetedFlag) {
          focusId = item.id
          return true
        }
        if (item.id === payload.focusId) {
          tagetedFlag = true
        }
        return false
      })

      if (isHit) {
        state.focus = {
          focusId: focusId,
          offset: payload.offset ? payload.offset : 99999
        }
      } else {
        // todo warn
      }
    },
    [USE_FOCUS](state, payload) {
      state.focus = null
    }
  },
  actions: {
    [CREATE_SLIDE](state, payload) {
      createSlide({
        courseId: payload.courseId,
        name: payload.name
      }).then(res => {
        console.log(res)
      })
    },

    [GET_SLIDE](state, payload) {
      getSlide(payload.id).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}