用混入的方法引入vuex，并且解决vuex刷新页面值丢失的问题
前段时间，做了个官网项目，客户要求将首页的域名后面的参数去除干净，然后就把#去掉了，一转脸，客户让去掉子页面地址栏上的参数，这很棘手，因为子页面的内容是根据子页面地址栏上的参数而定的，如果要去掉这些参数，怎么在跳转页面时也可以拿到上一个页面所存的变量呢？于是，想起了vuex，但是vuex有一个问题是，一旦刷新页面，vuex中的值会丢失，那怎么解决呢？就是在存变量值的同时在session中也存一份数据，在取变量值时，如果刷新了页面，变量值肯定就不存在了，这时我么你可以判断vuex中的变量是否有值，若果有值就直接取，如果没值，就从sessionStorage中拿，（需要注意的时，在最初，一定是存值在先，取值在后，否者，还没存，先取了，肯定取到个null值）。解决了vuex值刷新页面丢失问题后，又想，每次引入vuex，设置什么computed，methods什么的，很麻烦，如果是很多页面都会用到vuex中的某几个变量，在每个页面都引入vuex，再设置computed，methods等，显得很繁琐，于是想起了mixins，vue中的一种混入机制。下面来看看具体的代码：
store.js
黄色背景的代码解决了vuex刷新页面值丢失的问题
import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: {//声明变量 val:"",//变量 }, getters:{//获取值 getVal(state){ if(state.val){ return state.val; }else{ return sessionStorage.getItem("val") } } }, mutations: {//值如何变化 setVal(state,value){ state.val=value; sessionStorage.setItem("val",value);//在session中存一下 } }, actions: {//异步执行 可以按顺序调用多个mutations的方法 asyncSetVal({commit,state},value){ commit("setVal",value); } } });
下面，看看如何使用混入（在src目录下建立mixins/mixinVuex.js）
mixinVuex.js（混入的代码会比父页面先执行）
import {mapGetters,mapActions} from "vuex"
export default {
computed:{
...mapGetters([
'getVal'//获取到state.val数据。
])
},
watch:{
},
data() {
return {
mixinName: 'mixin'
}
},
created() {
},
mounted() {
},
methods: {
...mapActions([
"asyncSetVal"
]),
}
}
接下来看看如何把mixinVuex.js混入到某个页面
<template>
<div class="homeBox">
//...
</div>
</template>
<script>
import mixinVuex from '@/mixins/mixinVuex.js'; // 引入mixin文件
export default {
name: "home",
mixins:[mixinVuex],
data(){
return{}
},
methods: {
homeInit(lang){//初始化
var self=this;
},
toChildPage(){
this.asyncSetVal("变量");
this.$router.push({name:"childPage"});
},
toChildPage2(){
this.asyncSetVal("变量2");
this.$router.push({name:"childPage"});
}
}
};
</script>
<style scoped>
.homeBox{
}
</style>
ok 结束
优质内容筛选与推荐>>1、第七章 SportsStore: 模型的扩展
2、Spring MVC怎么统一异常管理？
3、windows删除或修改本地Git保存的账号密码
4、pycharm运行程序，总是出现IPthony界面（IPython 6.2.1 -- An enhanced Interactive Python. Type '?' for help. PyDev console: using IPython 6.2.1）
5、判断一个数num是否是2的幂（乐视题）