[vue] 解決vuex中state頁面刷新恢復默認值的一些思路

現有需求：

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頁面刷新恢復默認值的一些思路，希望對大家有所幫助，如果大家有任何疑問請給我留言，我會及時回覆大家的◕ฺ‿◕)，謝謝！