Vuex 中localStorage的使用 原

const key = "addkey"
var storageObjece = {
  set: function(items) {
    localStorage.setItem(key, JSON.stringify(items))
  },
  get: function() {
    var val = localStorage.getItem(key) || '[]';
      val = JSON.parse(val);
      return val
  }

}

export default storageObjece

<script>
import storage from "../assets/js/localstorage.js"
//console.log(storage)
export default {
  data() {
    return {
      value: "",
      id: 0,
      textvalue: "",
      editId: 0,

    }
  },
  watch:{
    items:{
     handler:function(items){
      //console.log(val,oldVal)
      storage.set(items)
     },
     deep:true  //也检测items内部的key的变化
    }
  },
  methods: {
    addItem() {
      let item = { value: this.value, id: ++this.id }
      this.$store.dispatch("addItems", item)

    },
    del(index) {
      this.$store.dispatch("delItem", index)
    },
    edit(index) {
      //alert(index)
      this.editId = index
      //alert(this.editId)
      //下面的computed是获取store里面的items,items也可以用在方法中，要this.items
      $("#editBox").modal()
      this.textvalue = this.items[index].value
    },
    save() {
      // alert(this.editId)
      // alert(this.beforevalue)

      //this.items[this.editId].value=this.textvalue

      // alert(this.items[this.editId].value)
      this.$store.dispatch("saveItem", {
        editId: this.editId,
        textvalue: this.textvalue
      })
    }
  },

  computed: {
    items: function() {
      return this.$store.state.items
    }
  }
}

</script>

import Vue from 'vue'
import Vuex from "vuex"
import storage from "../assets/js/localstorage.js"
Vue.use(Vuex)

//import Index from '@/views/index/index'
//import Manage from '@/views/manage/index'

//import OtherRouter from '../views/index/otherrouter'

const store = new Vuex.Store({
  state: {
    items: storage.get()
    // [
    //   // { value: "default", id: 0 }
    // ],
    
  },

  mutations: {
    addItems(state, item) {
      state.items.push(item)
    },
    delItem(state,index){
      state.items.splice(index,1)
    },
    saveItem(state,payload){
      //alert("hi")
      state.items[payload.editId].value=payload.textvalue
     
    }
  },
  actions: {
    addItems(context, item) {
      context.commit("addItems", item)
    },
    delItem(context,index){
      context.commit("delItem", index)
    },
     saveItem(context,payload){
      context.commit("saveItem", payload)
    },
  }
});

export default store