vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0
现有需求：
公用头部组件有个购物车图标及商品数量（数量默认是0）；点击加入购物车按钮时（不同页面都有加入购物车按钮，它们之间是非父子组件之间关系），实时改变购物车数量的变化；我们都知道，实现它可以使用vuex，但是页面刷新时，要保持vuex中的值不会被还原成默认值，该怎么做呢？可能废话有点多，请忽略哈，下面开始进入正题： 思路：其实很简单，只要注册一个全局的函数，函数里执行购物车列表后台接口，axios里请求到的购物车数量，重新赋值给vuex里定义的变量即可。
1、vuex
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { cartNum: 0 }, mutations: { getCartNum(state, val) { state.cartNum += val } }, actions: { setCartNum(context, val) { context.commit('getCartNum', val) } } })2、首页取vuex中的值：
<template> <div id="app"> <div class="cart">购物车数量：{{cartNumFn}}</div> <div id="nav"> <router-link to="/">Home</router-link>| <router-link to="/about">About</router-link>| <router-link to="/cart1">cart1</router-link>| <router-link to="/cart2">cart2</router-link>| <router-link to="/cart3">cart3</router-link>| <router-link to="/cart4">cart4</router-link> </div> <router-view /> </div> </template> <script> export default { name: "App", computed: { cartNumFn() { return this.$store.state.cartNum; } } }; </script>页面效果：
3、各页面加入购物车按钮点击时，改变vuex中的值（各页面使用方法雷同）
<template> <div class="about"> <h1>This is an about page</h1> <button @click="onJoinCart">加入购物车</button> </div> </template> <script> import { mapActions } from "vuex"; export default { methods: { ...mapActions(["setCartNum"]), onJoinCart() { this.setCartNum(1); } } }; </script>好的，现在实现了，各也页面点击时，购物车数量发生了变化，如下图：
4、页面刷新时，定义了一个中间件numChange.js ，取到接口的值，重新赋给vuex中定义的变量。（小知识：axios中不能return拿到接口返回值，可以使用callback(res)方式取到值）
import store from '../store' export const cartNumChange = () => { // axios.post('xxxxx', res => { // 请求后台购物车列表接口 // store.dispatch('setCartNum', res.data.num) // }) }numChange.js在main.js中调用：
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import { cartNumChange } from '@/utils/num' Vue.config.productionTip = false cartNumChange() // 购物车数量变化 new Vue({ router, store, render: h => h(App) }).$mount('#app')到此已经完成啦◕ฺ‿◕)！
5、总结：以上所述是给大家介绍的解决vuex中state页面刷新恢复默认值的一些思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的◕ฺ‿◕)，谢谢！
