Vuex常見(jiàn)屬性以及組件中調(diào)用的幾種方法

定義 :vue組件的狀態(tài)管理模式，存放在vuex里的數(shù)據(jù)可以在所有的組件當(dāng)中使用；

vuex的引用

import vuex from 'vuex'

vuex中的核心屬性

• state: 用來(lái)存放數(shù)據(jù)的屬性.

  state:{
    num : 50, //定義一個(gè)num
    title : 400
  }
  

• getters:類似組件中的computed屬性，其值受state中的影響，

  getters : {
    //例如寫(xiě)一個(gè)總和的函數(shù)
      //需要傳一個(gè)參數(shù)，也就是state
    dbNum(state){
          return state.num * 2
      }
  }
  

• mutations : 組件如果想要改變vuex中的數(shù)據(jù)時(shí)，那么vuex提供的改變數(shù)據(jù)的方法將寫(xiě)在此屬性下 ，這里的方法必須是同步的,異步只能改變視圖的值

mutations:{
    //state為了獲取到數(shù)據(jù)；
    //payload即是調(diào)用該方法時(shí)傳的參數(shù)，可以是個(gè)對(duì)象
    chanNum(state,payload){
        state.num += payload  //如果傳的參數(shù)是對(duì)象{age:20},payload.age
    }
}

• actions：用于存儲(chǔ)異步處理數(shù)據(jù)的方法，最常見(jiàn)的就是settimeout(),

  actions : {
        //context是一個(gè)對(duì)象，里面的commit()方法用來(lái)調(diào)用mutations中的方法
      //解構(gòu)  let {commit} = context
      asyncChanNum ({commit},payload) {
          settimeout (() =>{
              //注意這里是調(diào)用mutations中的函數(shù)
              commit("chanNum",payload)
          },5000)
      }
  }
  

vuex的拆分

由于在開(kāi)發(fā)過(guò)程當(dāng)中，要存儲(chǔ)的數(shù)據(jù)很多，所以將其拆分一個(gè)個(gè)小塊

在store中新建一個(gè)vuex對(duì)應(yīng)功能的文件夾以及js文件，例如：/store/add/index.js

• 在index.js中導(dǎo)出對(duì)象

export default {
    //注意需要一個(gè)命名空間為true，不然在組件中調(diào)用的時(shí)候不能識(shí)別，設(shè)置可讀 
    namespaced:true,
    state : {},
    mutations : {},
    getters:{},
    actions : {},
}

• 在store/index.js中引用

import Vue from 'vue'
import Vuex from 'vuex'
import add from "./add"  //idnex.js可以省略，盡量模塊名保持一致
Vue.use(Vuex)
//導(dǎo)出Vuex
export default new Vuex.Store({
    modules : {
        add  //注冊(cè)模塊
    }
})

將vuex模塊進(jìn)一步細(xì)化

• 同理，將state mutations getters action 單獨(dú)放在相應(yīng)的功能文件夾下面，在index.js中統(tǒng)一導(dǎo)入

  import actions from "./actions";
  import getters from "./getters";
  import mutations from "./mutations";
  import state from "./state";
  export default {
  
    namespaced: true, //設(shè)置可讀  可以在store中把當(dāng)前模塊文件夾名稱（add），當(dāng)作模塊名使用
    state,
    getters,
    mutations,
    actions,
  }
  

vuex的引用

一、普通調(diào)用

注意 ：當(dāng)把vuex一一拆分之后，$store就失去作用了

<template>
    <div>
        <p>{{$store.state.num}}</p>
        <p>
            {{dbNum}}
        </p>
        <button @click="asyncChanNum">  //調(diào)用的函數(shù)名  ,也可以在此處傳參數(shù)
            add
        </button>
    </div>
</template>

export default {
    //vuex中的state和getters要寫(xiě)在computed屬性中
    //$store是一個(gè)對(duì)象，用來(lái)接受vuex中的屬性
    computed:{
        num(){
           return this.$store.state.num
        },
        dbNum(){
         return this.$store.getters.dbNum
        }
    },
    //其余的兩個(gè)屬性在methods中調(diào)用或者直接在標(biāo)簽中使用
    methods:{
        chanNum(){
            //注意mutations中函數(shù)的調(diào)用   commit()
            this.$store.commit("chanNum",{age : 20}) //第一個(gè)是vuex中的方法名，第二個(gè)要傳的實(shí)參
        },
        asyncChanNum(){
            this.$store.dispatch("asyncChanNum",{num:50})
        }
    }
}

二、輔助函數(shù)

• 在組件中引入模塊

  import { mapState, mapMutations,mapGetters,mapActions } from "vuex";

1. 展開(kāi)數(shù)組的方式引用

   <template>
    <div>
           {{num}}
       </div>
       <p>
           {{dbNum}}
       </p>
   </template>
   

   export default {
       computed  :{
           // 數(shù)組當(dāng)中寫(xiě)數(shù)據(jù)或者函數(shù)
           ...mapState(["num",]) ,
           ...mapGetters(["dbNum"])
       },
       methods : {
          //數(shù)組中的數(shù)據(jù)可直接使用胡子語(yǔ)法在模板中使用，也可以用this來(lái)調(diào)用
           ...mapMutations(["chanNnm"]),
           ...mapActions(["asyncChanNum"])
       }
   }
   

2. 展開(kāi)對(duì)象的方式引用

   export default {
       computed:{
           //寫(xiě)成對(duì)象的形式，state中的數(shù)據(jù)有所不同
           ...mapState({
               num : state => state.num,  //當(dāng)vue拆分后，state.路徑.數(shù)據(jù)   當(dāng)時(shí)設(shè)置namespaced：true就是為了在這里起作用
           }),
       },
       methods :{
           ...mapMutations :({
               chanNum : "chanNum" ,//同理若是拆分后就要在前面加上路徑
           })
       }
   }