default CRUD vuex store array with samples for creating the modules and how to map module on view

ClipList.vue

// components/ClipList.vue
<template>
  <div>
    <h1>{{ clientid }}</h1>
    Add: <input v-model="newClip.title" placeholder="Enter a title, then hit [enter]" @keyup.enter="tryCreateClip">
    <br />Search: <input v-model="q" placeholder="Enter a title for search, and hit [enter]" @keyup.enter="trySearchClip">
    <br />Result: {{searchResult}}
    <div class="client">
      <ul>
        <li v-for="clip in clips">
          <label>{{ clip.som }}:</label> {{clip.title}} <button @click="tryRemoveClip(clip._id)">X</button><button @click="tryPatchClip({_id: clip._id, title: 'patched'})">P</button>
            <button @click="tryUpdateClip({_id: clip._id, title: 'updated', som: 0})">U</button>
            <button @click="tryGetClip(clip._id)">G</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {
      newClip: {title: ''},
      q: '',
      searchResult: []
    }
  },
  props: ['clientid'],
  computed: {
    ...mapState('clips', {
      clips: state => state.list
    }),
    ...mapGetters('clips', {
      getClip: 'byId',
      searchClip: 'find'
    })
  },
  methods: {
    tryCreateClip () {
      this.createClip({
        title: this.newClip.title,
        som: new Date().getTime()
      })
      this.resetNewClip()
    },
    tryRemoveClip (id) {
      this.removeClip(id)
    },
    tryPatchClip (clip) {
      this.patchClip(clip)
    },
    tryUpdateClip (clip) {
      this.updateClip(clip)
    },
    tryGetClip (id) {
      console.log(this.getClip(id))
    },
    trySearchClip () {
      this.searchResult.splice(0, this.searchResult.length, this.searchClip({title: this.q}))
    },
    resetNewClip () {
      this.newClip.title = ''
    },
    ...mapActions('clips', {createClip: 'create', removeClip: 'remove', patchClip: 'patch', updateClip: 'update'})
  }
}
</script>

clips.js

// store/module/clips.js
import Crud from './crud'

export default Crud()

crud.js

// store/module/.crud.js
export default function () {
  return {
    namespaced: true,

    state: {
      list: []
    },

    getters: {
      byId: (state, getters) => (id) => {
        return state.list.find(o => o._id === id)
      },
      find: (state, getters) => (params) => {
        return state.list.filter(function (o) {
          var result = true
          for (var key in params) {
            if (o[key] !== params[key]) {
              result = false
            }
          }
          return result
        })
      }
    },

    actions: {
      create ({commit}, newObject) {
        commit('CREATE', newObject)
      },
      patch ({commit}, patch) {
        commit('PATCH', patch)
      },
      update ({commit}, newObject) {
        commit('UPDATE', newObject)
      },
      remove ({commit}, id) {
        commit('REMOVE', id)
      }
    },

    mutations: {
      'CREATE' (state, newObject) {
        // generate id if does not exist
        var idx = -1
        if (!newObject._id) {
          newObject._id = '' + new Date().getTime()
        } else {
          idx = state.list.findIndex(o => o._id === newObject._id)
        }
        if (idx === -1) {
          state.list.push(newObject)
        } else {
          Object.assign(state.list[idx], newObject, {})
        }
      },

      'PATCH' (state, object) {
        var o = state.list.find(o => o._id === object._id)
        if (o) {
          Object.assign(o, object, {})
        }
      },

      'UPDATE' (state, object) {
        var idx = -1
        if (object._id) {
          idx = state.list.findIndex(o => o._id === object._id)
          if (idx > -1) {
            state.list.splice(idx, 1, object)
          }
        }
      },

      'REMOVE' (state, id) {
        var idx = state.list.findIndex(o => o._id === id)
        if (idx > -1) {
          state.list.splice(idx, 1)
        }
      }
    }
  }
}

index.js

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import clipStore from './modules/clips'
import projectsStore from './modules/projects'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    clips: clipStore,
    projects: projectsStore
  }
})

projects.js

// store/modules/projects.js
import Crud from './crud'

export default Crud()