技術標籤：vue

使用步驟：

①store裡的index.js就代表倉庫
②在根元件中引入並註冊
③子元件引入註冊使用
④在子元件物件中使用方法方法裡的資料為：thi.$store.commit(" state，payload")
⑤在倉庫的mutations中定義方法
⑥mutaions我們的函式中預設第一個引數就是state，第二個引數是payload

mapState自動對映計算屬性：

computed:{
            // 計算屬性一般是隻讀的，所以說，一般我們會把倉庫中的狀態對映成元件中的計算屬性
            // 手動把倉庫中的狀態對映成元件中的計算屬性
 

            // 可以在元件中模板中使用計算屬性
            // count(){  // count是計算屬性  計算屬性可以寫成一個方法
            //     return this.$store.state.count
            // }

 // 下面的程式碼自動的把倉庫中的count狀態映射了元件中的計算屬性count
            ...mapState(['count','name','age'])
        },

mapGetters把倉庫中的狀態自動對映成元件的計算屬性

  // 元件中的計算屬性是根據data中的資料計算出一個新的資料
 

  getters:{ // 把getters當成元件中的計算屬性   getter是vuex中的計算屬性
    failNumber(state){  // 第1個引數也是狀態
      let n = 0;
      state.list.forEach(item=>{
        if(item.score < 60){
          n++
        }
      })
      return n
    }
  },

自動對映

使用：this.$store.getters.falinumber
        computed:{
            // 把倉庫中的getters對映成元件中的計算屬性
 

            // 手動對映
            // failNubmer(){
            //     return this.$store.getters.failNumber
            // }

            // 把倉庫中的getters自動對映成元件中的計算屬性
            ...mapGetters(['failNumber'])
        },

Mutations：它是唯一用來修改資料的工具

import { mapMutations } from “vuex”

methods:{
  // add(){
    // 手動地提交的一個mutations
    // this.$store.commit("add")
  // }

  // 把倉庫中的add這個mutations對映成元件的方法
  ...mapMutations(["add"]) // add是方法
}

mapActions把倉庫中的的actions自動對映成元件的方法（操作非同步狀態，需要在倉庫中的action中定義）

methods:{
  // addAsync(){
    // 在元件中需要dispath一個action
    // 在元件中要使用actions，需要dispath派發
    // this.$store.dispatch("addAsync")
  // }

  // 把倉庫中的add這個mutations對映成元件的方法
  // ...mapMutations(["addAsync"]) // add是方法

  // 把倉庫中的的action對映成元件的方法
  ...mapActions(["addAsync"])
}

  // 如果你對狀態的操作是非同步的
  // 需要把非同步程式碼寫在actions中
  // vuex作者規定的，不寫在actions中，狀態的變化不好跟蹤
  actions:{
    addAsync(context){ // actions中的第一個引數並不是狀態，是context
      // 非同步程式碼需要放在actoin中
      setTimeout(()=>{
        // 在action中需要手動的commit一個mutation
        // 因為在vuex中改變狀態的唯一途徑是mutation
        context.commit("add"); // 手動提交一個mutaion
      },3000)
    }
  }