vuex 本地存储 三方插件 vuex-persistedstate

首次使用 因为在网上查得到的使用案例都不是特别明白，

所以自己在使用的时候也是试试的态度，当然效果是尤其的好

<!--引入了资源-->
import Vue from 'vue'
import Vuex from 'vuex'
<!--这里是三方插件的名字-->
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
<!--只要引入了插件和引入下面这行代码，state里面的数据就会显示在默认localStorage里面，不过默认的key为vuex ,value 还是'{car[]}'这样。但是因为这三方插件的封装，我们在获取state 里面的数据就默认是本地存储的，但是想要本地存储的数据得到修改，修改的函数也必须写在同一vuex 文件中。
-->
  plugins: [createPersistedState()],
  state:{
      car:[],
     
  },
  mutations: {
  <!--修改购物车中的同id 的cou值-->
     add(state,res) {
       for(let i=0; i<state.car.length;i++){
          if(res.id===state.car[i].id){
            state.car[i].cou+=res.cou 
           return
          }
       }
       state.car.push(res)
     },  
     <!--第二个页面的另一个计步器里面的值的变化给到相同id-->
     addcar(state,res){
      for(let i=0; i<state.car.length;i++){
        if(res.id===state.car[i].id){
          state.car[i].cou=res.cou
         return
        }
     }
     state.car.push(res)
     },
     <!--这里是删除就不用说了-->
     delete(state,id){
     let index=  state.car.findIndex(item=>item.id===id)
      state.car.splice(index,1)

     }
  },
  actions: {
  },
  getters:{
  }
})

如果不是特别的理解用法也可以去查看一下，gitee.com/ricekyan/vu… 可以自己clone ，然后npm i ,npm run serve 跑代码看看效果，之后有时间封装一个网站挂载看看 这里有预览图片