Vuex中常用知識點有哪些-創(chuàng)新互聯(lián)

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、朗縣網(wǎng)站維護、網(wǎng)站推廣。

vuex中常用的一些知識點


一、為什么要使用Vuex

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

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

二、Vuex的五個核心屬性

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

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

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

// 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 作為第一個參數(shù)，提交載荷作為第二個參數(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ù)

<template>
  <div class="about">
    <h2>count: <span>{{count}}</span></h2>
    <h2>getCount: <span>{{$store.getters.getCount}}</span></h2>
    <h2>sum: <span>{{sum}}</span></h2>
    <h2>getSum: <span>{{$store.getters.getSum}}</span></h2>
    <button @click="clickB">test    </button>
  </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'; 
export default {
  name: 'about',
  data () {
    return {
      count: 0,
      sum: 0
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      countAlias: 'count',
      countPlusLocalState (state) {
        return state.count + this.localCount;
      }
    }),
    ...mapGetters([
      'getCount', 'getSum'
    ])
  },
  mounted () {
    this.count = this.$store.state.count;
    this.sum = this.$store.state.a.sum;

  },
  methods:{
    ...mapMutations(
      'add','addO'
    ),
    ...mapActions([
      'add','addO'
    ]),
    clickB () {
      this.$store.dispatch('add');
      this.$store.dispatch('addO');
    }
  }
}</script>

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

網(wǎng)站標(biāo)題：Vuex中常用知識點有哪些-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://muchs.cn/article36/ddsgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)、用戶體驗、網(wǎng)站制作、域名注冊、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)