Vuex的简单购物车案例以及页面刷新数据丢失的解决方法

友友们首先需要对vue框架有一点的了解,后端开发对于前端的框架和ui库会使用就行,直接上页面:

1.购物车页面：

<template>
  <div>
    <h1>vuex的使用简单实现购物车</h1>
    <h1>{{$store.state.user.username}}</h1>
    <h1>{{user.username}}</h1>
    <h1>{{mycar}}</h1>
    <input type="button" value="添加购物车" @click="insertcar">
    <input type="button" value="删除购物" @click="deletecar ">
    <input type="button" value="购物车" @click="Tomar">
    <input type="button" value="清空购物车" @click="Killmycar">
  </div>
</template>
<script>
import {mapState,mapMutations} from "vuex";
const option = {
  computed:{
    ...mapState(['user','mycar'])
  },
  data: function () {
    return {}
  },
  methods:{
   ...mapMutations(['updatename','insert','delateorderone',"killmycar"]),
    insertcar(){
      const re={
        id:"1",
        name:"张三",
        price:"100",
      }
      this.insert(re)
      const r1={
        id:"2",
        name:"李四",
        price:"1020",
      }
      this.insert(r1)
      const r2={
        id:"3",
        name:"李四",
        price:"1020",
      }
      this.insert(r2)
    },
    deletecar(){
      this.delateorderone(1)
    },
    Tomar(){
     this.$router.push("/404")
    },
    Killmycar(){
         this.killmycar()
    }
  }
};
export default option
</script>

2.购物车页面

<template>
<div>
  <h1>获取购物车的数据</h1>
  <h1>{{mycar}}</h1>
</div>
</template>
<script>
import {mapState} from 'vuex'
const option={
  computed:{
    ...mapState(['mycar'])
  },
   data:function (){
     return{

     }
   }
}
export default option
</script>

3.vuex的js文件

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
//定义全局的共享数据
export default new Vuex.Store({
  //定义全局共享实例,可以是一个或者多个
  state: {
    user:{
      username:""
    },
    mycar:[],
  },
  getters: {
  },
  //定义修改数据的方法
  mutations: {
    updatename(state,name){
       state.user.username=name
    },
    insert(state,items){
      state.mycar.push(items)
    },
    //删除一个
    delate(state){
      state.mycar.splice(0,1)
    },
    //删除指定的元素
    delateorderone(state,id){
       for(var i=0;i<state.mycar.length;i++){
             if(state.mycar[i].id==id){
               state.mycar.splice(i,1);
             }
       }
    },
    //清空购物车
    killmycar(state){
      state.mycar.splice(0,1000)
    }
  },
  //定义异步操作
  actions: {
  },
  modules: {
  },
  //持久化操作
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })]
})

对于vuex在页面刷新的时候数据丢失的问题:采用的（vuex-persistedstate）的一个插件

简单的原理：就是自动将vuex中的存放的信息保存到sessionStorage中在页面刷新的时候它会去判断sessionStorage中是否有值,如果有就会自动取出这个值