added vuex, nested with v-model example and example components

Author: Wayne Van Son

example/components/nested-with-vmodel.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="row">
+    <nested-test class="col-8"  v-model="elements"/>
+    <raw-displayer class="col-4" :title="'Vuex Store'" :value="elements"/>
+  </div>
+</template>
+
+<script>
+import NestedTest from "./nested/nested-test.vue";
+import rawDisplayer from "./infra/raw-displayer.vue";
+
+export default {
+  name: "nested-with-vmodel",
+  display: "Nested with v-model & Vuex",
+  order: 16,
+  components: {
+    NestedTest,
+    rawDisplayer
+  },
+  computed: {
+    elements: {
+      get() {
+        return this.$store.state.nestedA.elements;
+      },
+      set(value) {
+        console.log(value);
+        this.$store.dispatch("nestedA/updateElements", value);
+      }
+    }
+  },
+  methods: {}
+};
+</script>

example/components/nested/nested-test.vue

@@ -0,0 +1,61 @@
+<style scoped>
+.item-container {
+  border: solid black 1px;
+  min-height: 2rem;
+}
+
+.item {
+  padding: 1rem;
+
+}
+.item-sub {
+  padding:1rem;
+  margin: 0 0 0 1rem
+}
+</style>
+
+
+<template>
+  <draggable v-bind="dragOptions" class="item-container" :list="list" :value="value" @input="emitter">
+    <div class="item-group" :key="el.id" v-for="(el, i) in realValue">
+      <div class="item">{{ el.name }}</div>
+      <nested-test class="item-sub" :list="el.elements"/>
+    </div>
+  </draggable>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+export default {
+  name: "nested-test",
+  methods: {
+    emitter(value) {
+      this.$emit("input", value);
+    }
+  },
+  components: {
+    draggable
+  },
+  computed: {
+    dragOptions() {
+      return {transition: 200,}
+    },
+    realValue() {
+      const test = this.value ? this.value : this.list;
+      return test;
+    }
+  },
+  props: {
+    value: {
+      required: false,
+      type: Array,
+      default: null
+    },
+    list: {
+      required: false,
+      type: Array,
+      default: null
+    }
+  }
+};
+</script>

example/components/nested/nested1.js

@@ -0,0 +1,48 @@
+import Vuex from "vuex";
+import Vue from "vue";
+
+Vue.use(Vuex);
+
+export const nestedA = {
+  namespaced: true,
+  state: {
+    elements: [
+      {
+        id: 1,
+        name: "Shrek",
+        elements: []
+      },
+      {
+        id: 2,
+        name: "Fiona",
+        elements: [
+          {
+            id: 4,
+            name: "King",
+            elements: []
+          },
+          {
+            id: 5,
+            name: "Queen",
+            elements: []
+          }
+        ]
+      },
+      {
+        id: 3,
+        name: "Donkey",
+        elements: []
+      }
+    ]
+  },
+  mutations: {
+    updateElements: (state, payload) => {
+      state.elements = payload;
+    }
+  },
+  actions: {
+    updateElements: ({ commit }, payload) => {
+      commit("updateElements", payload);
+    }
+  }
+}

example/main.js

@@ -4,7 +4,7 @@ import VueRouter from "vue-router";
 import routes from "./route";
 import rawDisplayer from "./components/infra/raw-displayer.vue";
 import ElementUI from "element-ui";
-
+import store from "./store";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "font-awesome/css/font-awesome.css";
 
@@ -20,6 +20,7 @@ Vue.component("rawDisplayer", rawDisplayer);
 Vue.use(ElementUI);
 
 new Vue({
+  store,
   router,
   render: h => h(App)
 }).$mount("#app");

example/store.js

@@ -0,0 +1,12 @@
+import { nestedA } from "./components/nested/nested1";
+import Vuex from "vuex";
+import Vue from "vue";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  namespaced: true,
+  modules: {
+    nestedA
+  }
+});