vuex基本理論

一、vuex是采用集中式管理元件依賴的共享資料的一個工具，可以解決不同元件資料共享問題。

結論：

① 修改state狀态必須通過mutations

② mutations隻能執行同步代碼，類似ajax定時器之類的代碼不能在mutations中執行

③ 執行異步代碼，要通過actions，然後将資料送出給mutations才可以完成

④ state的狀态即共享資料可以在元件中引用

⑤ 元件中可以調用action

二、初始化功能

先建立一個新的腳手架項目, 在項目中應用vuex

vue create demo
           

開始vuex的初始化建立，選擇模式時，選擇預設模式

初始化：

第一步：npm i vuex --save => 安裝到運作時依賴 => 項目上線之後依然使用的依賴 ,開發時依賴 => 開發調試時使用

第二步： 在main.js中

第三步：在main.js中

Vue.use(Vuex)  => 調用了 vuex中的 一個install方法
           

第四步：

第五步：在根執行個體配置 store 選項指向 store 執行個體對象

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({})
new Vue({
     el: '#app',
     store
})
           

三、vuex基礎-state

1、定義state

// 初始化vuex對象
const store = new Vuex.Store({
    //執行個體化vuex的構造函數
  state: {
    // 管理資料  存儲的狀态
    count: 0
  }
})
           

2、原始形式- 插值表達式

在App.vue元件中可以使用 this.$store 擷取到vuex中的store對象執行個體，可通過state屬性屬性擷取count， 如下

3、計算屬性 - 将state屬性定義在計算屬性中

<div> state的資料：{{ count }}</div>
 
// 把state中資料，定義在元件内的計算屬性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }
           

4、輔助函數 - mapState 方法

mapState是輔助函數，幫助我們把store中的資料映射到 元件的計算屬性中, 它屬于一種友善用法

第一步：導入mapState

第二步：利用延展運算符，采用數組形式引入state屬性

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

第三步：将導出的狀态映射給計算屬性

四、vuex基礎-mutations

資料快照：一次mutation的執行，立刻得到一種視圖狀态，因為是立刻，是以必須是同步

1、定義mutations

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定義mutations
  mutations: {
     
  }
})
           

2、格式說明

mutations: {
    // 方法裡參數 第一個參數是目前store的state屬性
    // payload 載荷 運輸參數 調用mutaiions的時候 可以傳遞參數 傳遞載荷
    addCount (state) {
      state.count += 1
    }
  },
           

3、原始形式

<template>
  <button @click="addCount">+1</button>
</template>

<script>
export default {
    methods: {
    //   調用方法
      addCount () {
         // 調用store中的mutations 送出給muations
        // commit('muations名稱', 2) 固定寫法
        this.$store.commit('addCount', 10)  // 直接調用mutations 
    }
  }
}
</script>
           

帶參數的傳遞

//在mainjs
  addCount (state, payload) {
    state.count += payload
}

//在元件
this.$store.commit('addCount', 10)
           

4、輔助函數 - mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出來，我們可以将它導入

<template>
  <button @click="addCount">+1</button>
</template>

import { mapMutations } from 'vuex'
methods: {
   ...mapMutations(['addCount'])
}
           

帶參數的傳遞

但是請注意： Vuex中mutations中要求不能寫異步代碼，如果有異步的ajax請求，應該放置在actions中

五、vuex基礎-actions

state是存放資料的，mutations是同步更新資料，actions則負責進行異步操作

定義actions

actions: {
 // 擷取異步的資料 context表示目前的store的執行個體 可以通過 context.state 擷取狀态 也可以通過context.commit 來送出mutations， 也可以 context.diapatch調用其他的action
   getAsyncCount (context) {
     setTimeout(function(){
       // 一秒鐘之後 要給一個數 去修改state
       context.commit('addCount', 123)
    }, 1000)
  }
}
           

原始調用 - $store.dispatch

addAsyncCount () {
    this.$store.dispatch('getAsyncCount')
}
           

傳參調用

addAsyncCount () {
    this.$store.dispatch('getAsyncCount', 123)
}
           

輔助函數 -mapActions

actions也有輔助函數，可以将action導入到元件中

import { mapActions } from 'vuex'
methods: {
   ...mapActions(['getAsyncCount'])
}
           

直接通過 this.方法就可以調用

六、vuex基礎-getters

vuex的一種計算屬性

定義getters

getters: {
    // getters函數的第一個參數是 state
    // 必須要有傳回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }
           

原始方式 -$store

輔助函數 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}