這篇文章給大家分享的是有關(guān)Vuex中常用知識(shí)點(diǎn)有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),滄源網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:滄源等地區(qū)。滄源做網(wǎng)站價(jià)格咨詢(xún):028-86922220

vuex中常用的一些知識(shí)點(diǎn)

一、為什么要使用Vuex

1、多個(gè)組件依賴(lài)同一個(gè)狀態(tài)，使用組件之間通信方法會(huì)非常繁瑣，例如多層嵌套組件。

2、需要全局保存的數(shù)據(jù)，例如用戶(hù)、權(quán)限信息，全局系統(tǒng)設(shè)置

二、Vuex的五個(gè)核心屬性

1、state：存儲(chǔ)狀態(tài)

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 組件里獲取count值$store.state.count

2、getters：state作為第一個(gè)參數(shù)，其他getters作第二個(gè)參數(shù)，返回值會(huì)根據(jù)他的依賴(lài)緩存起來(lái)，相當(dāng)于Vue的計(jì)算屬性

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1，
    sum: 2
  },
  getters: {
    getCountAndSum： (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他組件獲取getter$store.getters.getCountAndSum

3、mutations：修改狀態(tài)（同步的），state 作為第一個(gè)參數(shù)，提交載荷作為第二個(gè)參數(shù)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他組件調(diào)用mutations的方法$store.commit('increment', {n: 100});

4、actions：異步操作（執(zhí)行mutations的方法，不是直變更狀態(tài)）

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }});// 其他組件調(diào)用actions的方法$store.dispatch('increment');

5、modules：store的子模塊

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他組件調(diào)用 （獲取state的變量需要加上引入的module的別名)$store.state.a$store.state.b

三、Vuex輔助函數(shù)

感謝各位的閱讀！關(guān)于“Vuex中常用知識(shí)點(diǎn)有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！