寫在前面

我是一個看技術的文檔不喜歡官方的人，覺得官方寫的任何東西都是比較正式的，讓人有點不想看的趕腳，我這里也不貼官方的那個圖了，這里也不解釋了（其實是我也不想研究）所以我一般都是百度一些別人的經(jīng)驗之談，看別人的經(jīng)驗之談可以讓你少踩一些坑，而且是可以直接看到效果的，所以這里也是，我們不按照官方的來，那么有利有弊，利就是好理解，弊就是可能寫的不夠專業(yè)，會讓一些人誤會，總之我權衡之后還是選擇看著官方的一些東西然后結合自己的使用來說一下怎么玩這個vuex的。說實話我開始使用的時候覺得這個東西還是很好的，畢竟結合自己的需求，如果您的項目一直沒有用到這個的地方可能體會不到，這里就開始寫玩法。

什么是vuex

說白了就是一個可以全局管理狀態(tài)的東西，用官方的話說是它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化，說人話就是可以時刻監(jiān)聽一個值的狀態(tài)改變，同時項目里面別的組件也可以使用這個變量。做出相應的處理。

安裝

這個是萬年不變的，沒什么好說的。直接在項目里面運行下面這行代碼

npm install vuex --save

我的業(yè)務場景

首先說一下業(yè)務場景，不然看代碼是沒有意義的，畢竟代碼是為了解決業(yè)務的問題，我的業(yè)務是需要做一個機器的管理項目，那么這個機器有很多臺，例如機器1、機器2等，那么想管理就需要將所有的機器先拿到，然后根據(jù)需要切換想設置的機器，view顯示對應的機器的配置信息，需求是很明確的，我語言表達能力不行，直接看圖。

這里簡單的解釋一下，有人說，這個不是很簡單嘛，直接將切換的函數(shù)寫到select的控件里面，直接點擊切換的函數(shù)的時候直接給后端對應的uuid，拿到值就可以了，是的，如果只有這一個頁面是可以的，但是仔細看布局，select組件是在一個公共組件里面的，你選擇的時候你的uuid是不可以直接給到當前頁面的，即時給到他，別的配置怎么辦呢？而且我們要做的是切換的時候直接整個項目里面的uuid全部改掉，然后重新渲染整個數(shù)據(jù)，才是合理的解決方案。說一下我開始的想法，我開始是準備使用緩存做，每次用戶切換的時候我都將最新的uuid放到緩存里面，但是有一個問題解決不了就是在別的頁面怎么實時監(jiān)聽這個值改變了呢？所以，使用vuex是一個比較合理的解決方案，看代碼

使用

新建一個store.js

引入

• 在store.js里面直接將下面的代碼復制到里面
• 聲明一個您需要監(jiān)聽的變量(store.js)

/**
 * created by ClearLove
 * @aim 標題欄中需要更改自助機的uuid，所有的返回值都需要是該自助機下的數(shù)據(jù)，所以需要聲明一個全局的可以監(jiān)聽uuid的變化
 * @params machine_uuid_flag 全局uuid
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const state = {
 machine_uuid_flag: '', //機器uuid
}

const getters = {
 getters_mac_uuid() {
  return state.machine_uuid_flag
 }
};
const mutations = {
 mutations_mac_uuid(state, mac_uuid) {
  state.machine_uuid_flag = mac_uuid
 }
};
const actions = {
 actions_mac_uuid(state, mac_uuid) {
  state.commit('mutations_mac_uuid', mac_uuid)
 }
};

export default new Vuex.Store({
 state,
 getters,
 mutations,
 actions
})

頁面使用

首先我們子啊公共組件也就是展示select組件的地方將切換事件處理一下

    /**
    * @change_machine 更改自助機
    */
   change_machine(machine_mac_uuid) {
    this.machine_id = machine_mac_uuid;
    // 這里是將最新的更換的機器的uuid，將store里面的uuid更換掉，這樣才可以保證別的地方使用這個uuid的地方也會同時改變
    this.$store.dispatch('actions_mac_uuid',machine_mac_uuid);
    sessionStorage.setItem('machine_mac_uuid', this.machine_id)
   },

把引入組件的代碼也貼上來吧，這樣好理解

<el-select v-model="machine_name" placeholder="自助機列表" size="mini" @change="change_machine">
       <el-option
        v-for="item in machine_list"
        :key="item.mac_uuid"
        :label="item.machine_name"
        :value="item.mac_uuid">
       </el-option>
</el-select>

這個時候下面的頁面怎么接收這個值做出相應的改變呢？

  created: function () {
   this.machine_mac_uuid = sessionStorage.getItem('machine_mac_uuid');
   this.machine_name = sessionStorage.getItem('machine_name');
   //將最新的uuid拿到
   this.update_mac_uuid = this.$store.state.machine_uuid_flag;
   this.get_settings_info()
  },
  /**
   * 接收store的改變的值
   */
  computed:{
   machine_uuid_flag(){
    //將接收到的最新的uuid return出去 
    return this.$store.state.machine_uuid_flag
   }
  },
  /**
   * 監(jiān)聽該store里面值的變化
   */
  watch: {
   //監(jiān)聽這個值是不是接收到，改變的話直接重新執(zhí)行獲取機器的方法
   machine_uuid_flag: function (newvalue , oldvalue) {
    this.update_mac_uuid = newvalue; //將最新的值傳遞給更新的對象
    this.get_settings_info();
   }
  },
  methods: {
   /**
    * @get_settings_info 獲取某一臺自助機的詳情
    */
   get_settings_info() {
    this.$axios({
     method: 'post',
     url: this.api.api_zzj_9006 + 'manager_back/get_main_info/',
     data: {
      machine_uuid: this.update_mac_uuid ? this.update_mac_uuid : this.machine_mac_uuid
     }
    }).then((res) => {
     let machine = res.data.data;
     this.machine_name = machine.machine_name;
     this.machine_mac_uuid = machine.machine_mac_uuid;
     this.location = machine.location;
     this.mac_uuid = machine.mac_uuid;
     this.machine_uuid = machine.machine_uuid;
     this.mac_uuid_two = machine.mac_uuid_two;
     this.expire_data = machine.expire_data;
     this.environmental_state_dec = machine.environmental_state_dec;
     this.machine_type_des = machine.machine_type_des;
     this.system_version = machine.system_version;
    }).catch((err) => {
     console.error(err)
    })
   }
  },
 

我在想你們是不是心里一萬句cnm飄過，寫那么多做什么？裝逼嗎？其實不是的，是我在看別人的博客的時候發(fā)現(xiàn)一個問題，就是很多人貼代碼的時候因為貼的是一部分，導致很多人摸不著頭腦，也不知道每一個方法是怎么傳遞的，我不想我的博客別人看了以后也有這樣的疑問，所以才整個直接貼出來，當然我會做出詳細的解釋，。

解釋一下上面的代碼：首先我們在頁面加載的時候也就是created的階段將最新的uuid也就是store里面的全局變量的值拿到，有人說你拿到， 為什么還要寫下面的，那么問題就來了，如果用戶在當前頁面直接切換了機器的uuid，那么他沒有刷新頁面，也沒有切換頁面，這個時候created是不會執(zhí)行的，是不是，那么最新的uuid怎么更新呢？你即使監(jiān)聽了但是由于createrd不執(zhí)行，導致的問題就是你監(jiān)聽的值一直沒有變化，所以我們需要將頁面里面的uuid變化時刻監(jiān)聽，所以我們需要在computed里面接收最新的uuid，然后我們監(jiān)聽這個里面的值，只要改變，就做出相應的改變，這樣就滿足了我們的需求，

問題1：為什么使用computed不直接使用watch？

有人看到以后就會覺得我們直接監(jiān)聽這個值不行嗎？我們這里要明白的是watch是只可以監(jiān)聽data里面聲明的變量或者對象，除此之外是監(jiān)聽不到的，而computed用來監(jiān)控自己定義的變量，該變量不在data里面聲明，直接在computed里面定義，然后就可以在頁面上進行雙向數(shù)據(jù)綁定展示出結果或者用作其他處理。

問題2：為什么使用緩存？

這里使用緩存的目的是為了你第一次進來的時候，如果用戶什么都不切換，不執(zhí)行change_machine函數(shù)的話，那么我們請求接口的參數(shù)是空的，所以我們需要默認一個值，你可以直接在store里面默認，也可以我在第一次進來的時候直接判斷是不是存在store的值，沒有的話就用我默認的緩存里面的值。

問題3: 為什么created里面已經(jīng)拿到了，還要寫監(jiān)聽函數(shù)？

這個問題可能有人會問，但是其實很簡單，因為用戶不刷新頁面的時候created是不執(zhí)行的，那么我們就拿不到最新的uuid進行數(shù)據(jù)的更新，所以要寫監(jiān)聽的函數(shù)。

問題4: 為什么使用this.$store.dispatch？

我們這里使用是根據(jù)官方文檔來的，你可以直接使用commit或者什么也不用，直接this.$store.state.machine_uuid_flag也是可以的，但是我們改變了uuid，那么就要重置一下store里面的原始值，所以這里需要接收我們改變的值，也就是用戶選擇了別的機器的時候用的值。如果我們不需要重置原始值的話，可以直接定義一個全局變量，然后直接

this.$store.state.machine_uuid_flag(這里格式亂了)就可以了，但是這樣的業(yè)務場景應該不多。畢竟我們定義了就是為了改變它從而我們可以監(jiān)聽這個變化的值。

總結

寫到這里基本上的用法我寫完了，可能寫的沒有那些大神寫的詳細，也沒有什么原理分析，寫的也比較淺顯，我看很多人寫博客的時候喜歡分析一下原理，一方面顯的專業(yè)性比較高，一方面可以有利于自己的理解和別人的理解，首先我也是不經(jīng)常使用這個技術棧，其次是我個人覺得用的好要比明白原理強，我不喜歡只講原理一個例子都不寫的人，畢竟例子是最可以發(fā)現(xiàn)問題的，也是最直觀的，就寫到這里吧，以后再更新，我寫博客的目的是記錄自己寫項目的過程，記錄用到的東西，以后用到了更深的再更新，希望可以幫助到人更好。寫的不對的希望可以直接聯(lián)系我，我及時糾正，謝謝大家的支持。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論