「Vue.Draggable」の並び順をブラウザに保存する方法

by kabanoki

HTML

<div id="app">
  <p>
      <button @click="doReload">ページリロード</button>
      <button @click="doSessionClear">セッションを削除</button>
  </p>
  <draggable tag="ul" v-model="items">
    <li v-for="item, index in getItems" :key="item.no">{{item.name}}-(No.{{item.no}})</li>
  </draggable>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-ls"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

  ul {
    list-style-type:none
  }  
  li {
    cursor:pointer;
    padding: 10px;
    border: solid #ddd 1px;
  }

Vue

const Storage = window.VueStorage;
Vue.use(Storage);

let app = new Vue({
  el: '#app',
  data: {
    items:[]
  },
  beforeMount: function(){
    if(Vue.ls.get('lsValue')){
      // ブラウザストレージデータがある場合
      this.items =  JSON.parse(Vue.ls.get('lsValue'));
    } else {
      this.items =  [
        {no:1, name:'キャベツ', categoryNo:'1'},
        {no:2, name:'ステーキ', categoryNo:'2'},
        {no:3, name:'リンゴ', categoryNo:'3'}
      ];
    }
  },
  methods:{
    doReload: function(){
      // ページのリロード
      location.reload();
    },
    doSessionClear: function(){
      // ブラウザストレージを削除する
      if(confirm('セッションを削除します')){
        Vue.ls.clear();
      }
    }
  },
  computed:{
    getItems: {
      get: function(){
        return this.items;
      },
      set: function(value) {
        this.items = value;
      }
    }
  },
  watch: {
    items: function(value){
      //inputValueが更新される度にローカルストレージを更新
      Vue.ls.set('lsValue', JSON.stringify(value), 60 * 60 * 1000);
    }
  }
});