大白話講解 Vuex 該怎麼樣使用

Vuex 是什麼？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

這是官網對 vuex 的一個簡單介紹，看到這段介紹你們可能有點懵，沒有關係，接下來我會爲你們講解一下 vuex 的一些基本概念，咱也不會什麼底層原理，但更多的仍是教你們在實際工做中該怎麼樣使用

Vuex 狀態管理核心

要想學會使用 Vuex 咱們先來簡單瞭解一下 vuex 中的幾個核心概念

State

Vuex就是一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於通常Vue對象裏面的data

data() {
    return {
        a: 'b',
        b: 'a'
    }
}
複製代碼

state裏面存放的數據是響應式的，Vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新

你能夠把status看做成登陸後的狀態，這幾個頁面都依賴於這個狀態顯示相應的信息，可是有一個頁面作了退出的操做，其餘幾個頁面也會受到影響

Getter

一、getters 能夠對 State進行計算操做，他就是 Store的計算屬性

二、雖然在組件內也能夠作計算屬性，可是getters能夠在多組件內複用

Mutation && Action

action 相似於 mutation

不一樣在於：Action 提交的是 Mutaion，而不是直接變動狀態，mutation 是改變 store中狀態的執行者，Action能夠包含任意異步操做，而 mutation 只能是同步操做

什麼狀況下應該使用 Vuex?

若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式 就足夠您所需了。可是，若是您須要構建一箇中大型單頁應用，您極可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲天然而然的選擇。

很常見應用場景如：

• 購物城功能
• 登陸狀態

...

使用 Vuex 的優點

• 多層嵌套的組件、兄弟組件間的狀態會更好管理維護
• 緩存一些當前要使用請求遠程或本地的數據集（刷新後會本身銷燬）
• 有了第二條，就能夠減小向服務器的請求，節省資源。若是你的用戶足夠多，那麼每多出一個請求，對公司來講，都是一大筆錢
• 對開發者來講，若是你的項目足夠複雜，團隊的規模也不只是一我的，數據集中處理更利於程序的穩定和維護

很少逼逼讓咱們在實踐中學習 Vuex

Vuex 的案例

首先咱們先經過 Vue Cli 腳手架生成一個vue 項目

$ vue create vuex-test
複製代碼

選擇 Vuex 若是不選擇咱們後邊須要單獨安裝，爲了省事仍是勾上吧

建立好項目後在你的項目根目錄 src 下會有一個 store.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})
複製代碼

咱們看到這個 store.js 文件內容結構是這個樣子，這是 vue-cli 幫咱們生成項目的時候自動生成的，接下來咱們就要基於這個模板來一步步完成咱們的小案例

咱們來擼 store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    INCREMENT (state, num) {
      state.count = state.count + num
    },
    DECREMENT (state, num) {
      state.count = state.count - num
    }
  },
  actions: {
    increment: ({ commit }) => commit('INCREMENT', 1),
    decrement: ({ commit }) => commit('DECREMENT', 1)
  }
})
複製代碼

在這個文件中咱們首先聲明瞭一個狀態 count, 接着咱們在 mutations 裏寫了兩個方法來改變 count 的狀態，以後咱們又在 actions 裏寫了兩個方法去調用 mutations 裏的方法, 一個很是簡單的邏輯

爲了省事，咱們直接在Vue CLI 建立的 模板中進行操做

App.vue

<template>
  <div id="app">
    <span>App組件： {{count}}</span>
    <br>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>

    <Home />
    <About />
  </div>

</template>

<script> import { mapActions, mapState } from 'vuex' import Home from './views/Home'; import About from './views/About'; export default { components: { Home, About }, computed: { ...mapState({ count: 'count' // count: 'count', // 第一種寫法 // count: (state) => state.count, // 第二種寫法 }) }, methods: { ...mapActions({ increment: 'increment', decrement: 'decrement' }) } } </script>

<style> #app { width: 200px; height: 200px; margin: 200px auto; } </style>
複製代碼

上面咱們簡單的畫了下頁面，並引入了其餘兩個組件，在上面咱們看到 mapStat 和 mapActions 這是什麼鬼操做啊？？ 表面意思: mapState是 state 的輔助函數，相應的 mapActions 就是 actions 的輔助函數

• mapState 映射 this.count 爲 store.state.count
• mapMutations 其實跟mapState 的做用是相似的，將組件中的 methods 映射爲 store.commit 調用
• mapActions 將組件的 methods 映射爲 store.dispatch 調用
• mapGetter 僅僅是將 store 中的 getter 映射到局部計算屬性

這個頁面的邏輯也很簡單就是點擊按鈕對數據 +1 -1 的操做，當咱們點擊按鈕的時候分別觸發了 actions 裏的 increment 和 decrement 方法。由於咱們使用了mapActions 因此能夠直接像普通方法同樣去寫 若是你不使用 mapActions， 那麼你的寫法就必須是這樣 this.$store.dispatch('xxxxx')

借用官網的圖： 經過過mapActions 觸發mutation 從而commit ，改變state的值

Home.vue

<template>
  <div class="home">
    Home組件： {{count}}
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: 'count'
    })
  },
}
</script>
複製代碼

在這個組件裏咱們打印出了 count 這個狀態的值

About.vue

<template>
  <div class="about">
    About組件： {{count}}
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: 'count'
    })
  },
}
</script>
複製代碼

在這個組件裏咱們打印出了 count 這個狀態的值

有沒有看到咱們在App這個組件中經過方法改變 count 的值，另外兩個組件也會跟着變化，這就是一個簡單的實例，我發現我真的不會寫文章啊，多多包涵 謝謝...

我的博客