vuex狀態(tài)管理淺談之mapState用法

更新時(shí)間：2023年12月01日 09:26:16 作者：老電影故事

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余,為了解決這個(gè)問題我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性,這篇文章主要給大家介紹了關(guān)于vuex狀態(tài)管理之mapState用法的相關(guān)資料,需要的朋友可以參考下

一、state

state是什么?

定義:state(vuex) ≈ data (vue)

vuex的state和vue的data有很多相似之處,都是用于存儲一些數(shù)據(jù),或者說狀態(tài)值.這些值都將被掛載數(shù)據(jù)和dom的雙向綁定事件,也就是當(dāng)你改變值的時(shí)候可以觸發(fā)dom的更新.

雖然state和data有很多相似之處,但state在使用的時(shí)候一般被掛載到子組件的computed計(jì)算屬性上,這樣有利于state的值發(fā)生改變的時(shí)候及時(shí)響應(yīng)給子組件.如果你用data去接收$store.state,當(dāng)然可以接收到值,但由于這只是一個(gè)簡單的賦值操作,因此state中的狀態(tài)改變的時(shí)候不能被vue中的data監(jiān)聽到,當(dāng)然你也可以通過watch $store去解決這個(gè)問題,那你可以針是一個(gè)杠精

綜上所述,請用computed去接收state,如下

//state.js
let state = {
  count: 1,
  name: 'dkr',
  sex: '男',
  from: 'china'
}
export default state

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataCount: this.$store.state.count //用data接收
    }
  },
  computed:{
    count(){
      return this.$store.state.count //用computed接收
    }
  }
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }
}
</script>

在這里插入圖片描述

二、mapstate輔助函數(shù)

mapState是什么?

mapState是state的輔助函數(shù).這么說可能很難理解

抽象形容:mapState是state的語法糖,這么說可能你還想罵我,因?yàn)槟愀静涣私馐裁唇凶稣Z法糖,事實(shí)上我說的語法糖有自己的定義,什么是語法糖?我對語法糖的理解就是,用之前覺得,我明明已經(jīng)對一種操作很熟練了,并且這種操作也不存在什么問題,為什么要用所謂的"更好的操作",用了一段時(shí)間后,真香!

實(shí)際作用:當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵

在使用mapState之前,要導(dǎo)入這個(gè)輔助函數(shù)

import { mapState } from 'vuex'

store.js

// store.js
/**
    vuex的核心管理對象模塊:store
 */
import Vue from 'vue';
import Vuex from 'vuex';
import vuexTest from './modules/vuexTest';

Vue.use(Vuex)
// 狀態(tài)對象
const state = { // 初始化狀態(tài) 這里放置的狀態(tài)可以被多個(gè)組件共享
    count: 1,
    count1: 1,
    count2: 2,
    count3: 3,
    name: 'daming'
};
const mutations = {};
const actions = {};
const getters = {};

export default new Vuex.Store({
    state, // 狀態(tài)
    mutations, // 包含多個(gè)更新state函數(shù)的對象
    actions, // 包含多個(gè)隊(duì)形事件回調(diào)函數(shù)的對象
    getters, // 包含多個(gè)getter計(jì)算屬性函數(shù)的對象
    modules: { // 模塊化
        vuexTest
    }
});

1、在界面或組件中不使用mapState獲取vuex中state的狀態(tài)

雖然將所有的狀態(tài)放入Vuex，會使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個(gè)組件，最好還是作為組件的局部狀態(tài)，比如temp變量,hello, number作為組件的局部狀態(tài)。

<!-- test.vue -->
<template>
  <div id="example">
    {{count}}
    {{name}}
    {{helloName}}
    {{addNumber}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: 'hello',
      number: 1,
    }
  },
  computed: {

    // 由于 Vuex 的狀態(tài)存儲是響應(yīng)式的，所以可以使用計(jì)算屬性來獲得某個(gè)狀態(tài)
    // 通過下面的計(jì)算屬性，就可以在當(dāng)前組件中訪問到count,name，helloName，addNumber 在模板中我們通過大括號符號打印出來，當(dāng)然這些可以在vue中使用，比如在watch中監(jiān)聽，在mounted中使用

    // 下面的計(jì)算屬性涉及到了vuex管理的狀態(tài)
    count() { // 這實(shí)際上是ES6中對象的簡化寫法 完整寫法是 count: function { return this.$store.state.count }
      return this.$store.state.count
    },
    name() { // 這實(shí)際上是ES6中對象的簡化寫法 完整寫法是 name: function { return this.$store.state.count }
      return this.$store.state.count
    },
    helloName: function (state) { // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)，不能使用箭頭函數(shù)
      return this.hello + this.$store.state.name
    },
    addNumber: function (state) { // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)，不能使用箭頭函數(shù)
      return this.number + this.$store.state.count
    }
    // 但有一個(gè)問題
    // 當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會有些重復(fù)和冗余。比如上面的name(),count(),helloName(),顯得重復(fù)，代碼冗長
    // 為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵：
  },
  watch: {
     helloName(newVal,oldVal){
         console.log(newVal);
         console.log(oldVal);
     } 
  },
  mounted(){
      console.log(this.helloName);
  }
}
</script>

2、在組件、界面中使用mapState獲取vuex中state的數(shù)據(jù)

<!-- test.vue -->
<template>
  <div id="example">
    {{count}}
    {{count1}}
    {{repeatCount}}
    {{count3}}
    {{name}}
    {{helloName}}
    {{addNumber}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: 'hello',
      number: 1,
      count2: 2
    }
  },
  computed: {
    /**
     * 數(shù)組形式
     * 當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組。
     * */
    ...mapState(["count", "name"]),


    /**
     * 對象形式
     */
    ...mapState({
      count, // 這種就是count:"count", 的簡寫
      count1: "count1",
      repeatCount: "count2", // 當(dāng)組件中與vuex中的字符已經(jīng)出現(xiàn)重復(fù)時(shí)，使用 repeatCount 來映射 store.state.count2
      count3: (state) => { // 映射 count3 為 store.state.conut3的值
        return state.count3
      },
      helloName: function (state) { // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)，不能使用箭頭函數(shù)
        return this.hello + state.name
      },
      addNumber: function (state) { // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)，不能使用箭頭函數(shù)
        return this.number + state.count
      }
    })
  },
  watch: {
    helloName(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
    }
  },
  mounted() {
    console.log(this.helloName);
  }
}
</script>

3、modules的vuexTest模塊中state數(shù)據(jù)

/**
 * vuexTest.js
 * modules 中的數(shù)據(jù)
 */
export default {
    namespaced: true,
    state: {
        moduleVal: 1,
        moduleName: "戰(zhàn)戰(zhàn)兢兢"
    },
    getters: {
    },
    mutations: {
    },
    actions: {
    }
}

4、在界面或組件中不使用mapState獲取模塊modules vuexTest中state的狀態(tài)

<!-- module test.vue -->
<template>
  <div id="example">
    {{moduleVal}}
    {{moduleName}}
    {{moduleNameOther}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: 'hello',
      number: 1,
    }
  },
  computed: {
    moduleVal(){
        return this.$store.state.vuexTest.moduleVal
    },
    moduleName(){
        return this.$store.state.vuexTest.moduleVal
    },
    moduleNameOther(){
        // 當(dāng)組件中與vuex中的字符已經(jīng)出現(xiàn)重復(fù)時(shí)，使用 moduleNameOther 來映射 store.state.vuexTest.moduleName
        return this.$store.state.vuexTest.moduleVal 
    },
    
  },
  watch: {
    helloName(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
    }
  },
  mounted() {
    console.log(this.addNumber);
  }
}
</script>

5、在界面或組件中使用mapState獲取模塊modules vuexTest中state的狀態(tài)

<!-- module test.vue -->
<template>
  <div id="example">
    {{moduleVal}}
    {{moduleName}}
    {{moduleNameOther}}
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      hello: 'hello',
      number: 1,
    }
  },
  computed: {
    /**
     * 數(shù)組形式
     * 當(dāng)映射的計(jì)算屬性的名稱與 與模塊中vuexTest中state 的子節(jié)點(diǎn)名稱相同時(shí)，我們也可以給 mapState 傳一個(gè)字符串?dāng)?shù)組，
     * */
    ...mapState("vuexTest", ["moduleVal", "moduleName"]),
    // "vuexTest" 指向模塊vuexTest，"moduleVal"表示store.vuexTest.moduleVal


    /**
     * 對象形式
     */
    // 第一種對象方式
    ...mapState({
      moduleVal: "vuexTest/moduleVal",
      moduleNameOther: "vuexTest/moduleName" // 表示 moduleNameOther 映射到vuexTest模塊中moduleName
    }),

    ...mapState("vuexTest", {
      moduleVal, // 這種就是moduleVal:"moduleVal", 的簡寫
      moduleName: "moduleName",
      moduleNameOther: "moduleName", // 當(dāng)組件中與vuex中的字符已經(jīng)出現(xiàn)重復(fù)時(shí)，使用 moduleNameOther 來映射 store.state.vuexTest.moduleName
      moduleVal: (state) => { // 映射 moduleVal 為 store.state.vuexTest.moduleVal的值
        return state.moduleVal
      },
      helloName: function (state) { // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)，不能使用箭頭函數(shù)
        return this.hello + state.moduleName
      },
      addNumber(state) { // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)，不能使用箭頭函數(shù)
        return this.number + state.moduleVal
      }
    })
  },
  watch: {
    helloName(newVal, oldVal) {
      console.log(newVal);
      console.log(oldVal);
    }
  },
  mounted() {
    console.log(this.addNumber);
  }
}
</script>