vuex 小知識

vuex

因爲多個狀態分散的跨越在許多組件和交互間各個角落，大型應用複雜度也常常逐漸增加。vue提供了vuex庫進行組件數據管理

vuex的功能

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化

vuex 基本組件

store
stata
Getters
Mutations
Actions
Modules

建立一個vuex的數據庫

const store = new Vuex.Store({
  state: {
    count: 0
  },//存儲數據
  mutations: {
    increment (state) {
      state.count++
    }
  }//函數
})

調用數據

store.commit('increment')//在外部引用時通常用this.$store.commit('increment')

mutations

用來存放函數

引用方式

store.commit('')

載荷

store.commit 傳入額外的參數，即 mutation 的 載荷（payload）

const store= new Vuex.Store({

       state:{
           count:0,
           nub1:2,
           nub2:3
       },
       mutations:{
           jia(state,arg){

            state.count+=arg.n
               
           },
           jian(state,arg){

           state.count-=arg.n
               
           }
       },
       })

Getters 與 action

• Vuex 容許咱們在 store 中定義『getters』（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算

Action 相似於 mutation，不一樣在於：

Action 提交的是 mutation，而不是直接變動狀態。
Action 能夠包含任意異步操做。//依賴於mutations

Action 與mutations關係

乍一眼看上去感受畫蛇添足，咱們直接分發 mutation 豈不更方便？實際上並不是如此，還記得 mutation 必須同步執行這個限制麼？Action 就不受約束！咱們能夠在 action 內部執行異步操做：

下面例舉兩在computed中的運用方式

computed：

computed:{
      ...Vuex.mapState(['count','nub1','nub2']),
      ...Vuex.mapGetters(['he'])
                  
                  },