localstorage解决vuex刷新数据消失问题

ps:此实例仅仅展示vuex的用法，并不适用于页面跳转传参！！！

注：主要思路就是把传递的参数保存到localstorage中 并写入到state中

1、state.js

const state={
setguessid:{}
}

export default state

2、

/*存储mutations相关的常量*/

export const SET_GUESSID='SET_GUESSID'

3、

import * as types from './mutation-types'

const mutation={
 /*两个参数  state是获取state.js的数据  第二个参数就是提交的参数*/
 [types.SET_GUESSID](state,setguessid){
   
  state.setguessid=setguessid
 }
}

export default mutation

4、

/*stations映射  从getters中取数据到组件中*/

export const setguessid=state=>state.setguessid

5、index_guesslike.vue

import {mapMutations} from 'vuex'

  methods:{
  selectItem(item){
        this.$router.push({
      path:`/mtindex/${item.id}`      //设置带有参数的二级路由
         });
         this.setguessid(item.id);  //写入store中
         localStorage.setItem("segid",item.id);  //把点击的id放到localstorage中
        
         
    },
...mapMutations({
    setguessid:'SET_GUESSID',
  })  
  }

6、guess_you_detail.vue

import {mapMutations,mapGetters} from 'vuex'

computed:{  
       ...mapGetters([
       'setguessid'
        ]),
        issetguessid:function(){
        var lc_z=localStorage.getItem("segid");
        if(this.setguessid!=lc_z){    //当前传递的id值与localstage做对比 如果不相等则赋值
        this.setloguessid(lc_z);          
        } 
        return this.$store.state.setguessid;
        }   

      },

mounted(){
//console.log(this.issetguessid);
    axios.get(''''''''''''.json').then((res)=>{        
    var data_shopbanner=res.data.shopbanner[this.issetguessid-1];       注意：this.issetguessid-1               
this.$nextTick(()=>{   //this.$nextTick()方法保证dom加载完成
           this.scroll= new BScroll(this.$refs.menuwrapper,{bounce: false,click:true});  
       });                    
    })        
},
methods:{
    ...mapMutations({
    setloguessid:'SET_GUESSID'
  }) 
   
   
}