[vue] 解决vuex中state页面刷新恢复默认值的一些思路

彩蛋：后台管理系统一站式平台模板

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

现有需求：

1. 公用头部组件有个购物车图标及商品数量（数量默认是0）；
2. 点击加入购物车按钮时（不同页面都有加入购物车按钮，它们之间是非父子组件之间关系），实时改变购物车数量的变化；

我们都知道，实现它可以使用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页面刷新恢复默认值的一些思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的◕ฺ‿◕)，谢谢！