vuex 的使用詳解

1、vuex 概述

（一）組件之間共享數據的方式

可是這三種方案，只適合小範圍的數據共享，若是咱們須要頻繁的大範圍的進行組件之間的數據共享，那麼咱們就適合使用 vuex

（二）vuex 是什麼

主要實現數據共享
狀態值的就是 vuex 中所要共享的全局數據
vuex 就是實現組件之間共享數據的方案

（三）使用 vuex 的好處

（四）什麼樣的數據適合存儲到 vuex 中

2、vuex 的基本使用

先使用 vue ui 圖形界面來建立項目

store下的 index.js

入口文件 main.js

3、計時器（項目結構）

使用定時器案例來學習vuex的具體使用

Addition.vue

<template>
<div>
<p>當前的count值爲: </p>
<button>+1</button>
</div>
</template>

<script>

export default {
    data(){
        return{};
    }

}
</script>

Subtraction.vue

<template>
<div>
<p>當前的count值爲： </p>
<button>-1</button>
</div>
</template>

<script>
export default {
    data(){
        return{};
    }
}
</script>

App.vue

<template>
  <div id="app">
    <Addition/>

    <p>------------------------------</p>
    <Subtraction/>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'

export default {
  name: 'app',
  components: {
    Addition,
    Subtraction
  }
}
</script>

4、vuex 的核心概念

5、State

1. 組件訪問State 中數據的方式一

以下：

Addition.vue

<div>
<p>當前的count值爲：{{$store.state.count}} </p>
<button>+1</button>
</div>

2. 組件訪問 State 中數據的方式二

導入後須要在 export 中定義一計算屬性computed
而後在計算屬性中調用 導入的mapState函數，函數裏面放入一個數組，數組中存放的是你須要映射，或者須要使用全局的哪一個數據，那麼就把數據名稱放到裏面，以後須要在前面放上三個點... 表明着展開運算符，全局裏面的數據，映射爲我當前組件的一個計算屬性，能夠認爲當前的 count 就是計算屬性的一個值

6、Mutation

需求： 在 Addition組件中，點擊 +1 讓count 值不斷的 +1

<template>
<div>
<p>當前的count值爲：{{$store.state.count}} </p>
<button @click="add">+1</button>
</div>
</template>

<script>
export default {
    data(){
        return{};
    },
    methods:{
        add(){
            this.$store.state.count++
        }
    }
}
</script>

這種方式雖然實現了咱們的需求，可是，是錯誤的，由於在vuex 中，不容許直接去修改組件全局的數據，這種代碼徹底是不合法的

（一）Mutation的做用

若是是經過 this.$store.state.count++ 去寫代碼，若是項目越寫越大，最終state裏面的count 發生了變化，若是此時，你想要去查看誰修改了其中的數據，會很麻煩，不方便維護，若是使用 mutation裏面的函數來修改 state 中的函數的話，若是發現 state中的數據有問題，可直接經過 mutation發現問題

（二）觸發 Mutation 函數的第一種方式

1. Mutation 傳遞一個參數

store下的 index.js

Addition.vue

2. Mutation 傳遞兩個參數

栗子：

效果：

（三）觸發 Mutation 的第二種方式

栗子：

store下的 index.js

Subtraction.vue

一樣，Mutation 中能夠傳遞參數

Subtraction.vue

index.js

效果：

7、Action

需求：點擊按鈕+1，等待1秒後再讓count值加1

雖然頁面中的效果展現正確了，可是實際上 state中的 count 仍是 0，沒有發生變化
因此咱們知道 在 mutation 函數中，不要執行異步的操做
那麼，若是咱們就想要在 vuex 中執行異步操做呢???

栗子：

store下的 index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },

  mutations: {
    //加一
    jiayi(state){
       state.count++
    //加N
    jiaN (state,step){
      state.count+=step
    },
    //減一
    jianyi(state){
      state.count--
    },
    //減去N
    jianN(state,step){
      state.count-=step
    }
  },
  actions: {
  //實現異步加一
    addAsync(context){
      //context 至關於 new 出來的 vuex.store實例對象
      setTimeout(()=>{
        context.commit('jiayi')
        //actions中不能直接去修改 state中的數據
        //若是想要修改必須經過context.commit()去觸發mutation中的某個方法才行
      },1000)
    }
  },
  modules: {
  }
})

Addition.vue

<template>
<div>
<p>當前的count值爲：{{$store.state.count}} </p>
<button @click="add">+1</button>
<button @click="addN">+N</button>
<button @click="addAy">+1 Async</button>
</div>
</template>

<script>
export default {
    data(){
        return{};
    },
    methods:{
        add(){
            this.$store.commit('jiayi')
        },
        addN(){
            this.$store.commit('jiaN',4)
        },
        addAy(){
            this.$store.dispatch('addAsync')
        }
    }
}
</script>

效果:

總結：
1.若是想要修改 state中的數據，只有 mutations纔有權力
2.可是mutation裏面執行異步操做的話，頁面能正常顯示，可是實際state中的數據並無改變
3.因此須要使用 actions 裏面去執行異步操做，可是actions實際是在mutation的基礎上去實現異步操做更改數據，它自己是不能更改state中的數據的
4.actions中的參數context至關於 new 出來的 store實例對象

（一） 觸發actions 異步任務時攜帶參數

（二）觸發Actions 異步任務的第二種方式

栗子：

Subtraction.vue

<template>
<div>
<p>當前的count值爲：{{count}} </p>
<button @click="sub">-1</button>
<button @click="subN">-N</button>
<button @click="subAy">-Async</button>
</div>
</template>

<script>
//1.導入 mapState
import {mapState} from 'vuex'

//a.導入 mapMutations
import {mapMutations} from 'vuex'

//導入 mapActions
import {mapActions} from 'vuex'

export default {
    data(){
        return{};
    },
    //2.定義一個計算屬性
    computed:{
        ...mapState(['count'])
    },
    methods:{
        //b.定義 mapMutations 方法
        ...mapMutations(['jianyi','jianN']),
        ...mapActions(['jianAsync']),
        sub(){
            this.jianyi()
        },
        subN(){
            this.jianN(3)
        },
        subAy(){
            this.jianAsync()        
        }
    }
}
</script>

或者直接把 button 的click函數等於 mapActions 的函數名

<!-- <button @click="subAy">-Async</button> -->
<button @click="jianAsync">-Async</button>

8、Getter

（一）使用 Getter的第一種方式

栗子：

store下面的 index.js

Addition.vue

（二） 使用 Getter的第二種方式

Subtraction.vue

<!-- <p>當前的count值爲：{{count}} </p> -->
<p>{{getNum}}</p>

//導入 mapGetters
import {mapGetters} from 'vuex'

computed:{
        ...mapState(['count']),
        ...mapGetters(['getNum'])
    },