VueX

什麼是VueX？

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。這是官網上的介紹，聽完是不是很懵，So what？我理解的VueX就是把data的值同步的變化，則需要一個東西把它儲存起來，以便於在全域性使用。

VueX的使用

• 每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全域性物件有以下兩點不同：

• Vuex 的狀態儲存是響應式的。當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

• 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地瞭解我們的應用。

• 安裝好VueX就可以建立一些state和mutation

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
//store.state 來獲取狀態物件，通過 store.commit 方法觸發狀態變更
store.commit('increment')
/輸出結果
console.log(store.state.count) // -> 1
//掛載到Vue例項上（ES6）
new Vue({
  el: '#app',
  store
})
//在方法上提交變更
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}
複製程式碼
 

VueX的核心

• state：儲存store的各種狀態
• mutation： 改變store的狀態只能通過mutation方法
• action： 非同步操作方法
• module： 模組化
• getter： 相當於計算屬性，過濾出來一些值
• state的使用

const store = new Vuex.Store({
    //存放狀態資訊
    state: {
        counter:1000,
    },
 //拿到counter的值
<h2>{{$store.state.counter}}</h2>
    

複製程式碼

• mutation的使用

 mutations: {
        //方法,改state提交mutation
        //mutation響應規則
        //mutation無法進行非同步更新
        increment(state) {
            state.counter++

        },
      }  
  //在方法中提交mutation
  methods: {
    addition(){
      //提交store的資訊
      this.$store.commit('increment')
      }

複製程式碼
 

• action的使用

const store = new Vuex.Store({
    //存放狀態資訊
    state: {
        Info: {
            name : 'kobe',
            age:20,
            height : 1.98
       }
    },
    
    actions:{
        //進行非同步操作
        //context上下文
        //非同步可以用setTimeout
        aupdateInfo(context){
            setTimeout(() =>{
                context.commit('updateInfo')

            },1000)
        }
    }
    methods: {
        updateInfo() {
      // this.$store.commit('updateInfo')
      // dispatch：含有非同步操作，例如向後臺提交資料，寫法:this.$store.dispatch('action方法名',值)

//commit：同步操作，寫法：this.$store.commit('mutations方法名',值)
      this.$store.dispatch('aupdateInfo')
      },
  }
}
複製程式碼

• getter的使用

  getters: {
        //vuex中的計算屬性，用於篩選資料
        powerCounter(state) {
            return state.counter * state.counter
        }
  //掛載
  <h2>{{$store.getters.powerCounter}}</h2>

複製程式碼

• module的使用

    modules :{
//state比較臃腫時在modules中劃分，有自己的getters，mutations，actions等
        a:modulesA
    }
 const modulesA = {
    state : {
        name : 'zhangsan'
    }
    mutation： {}，
    getter： {}

}


複製程式碼

注意

action和mutation的區別：

• action非同步操作，mutation同步操作
• action提交的是mutation，而不是直接變更狀態