快捷導(dǎo)航

vuex中的state屬性解析

更新時(shí)間：2022年04月12日 11:23:01 作者：正版蜀黍

這篇文章主要介紹了vuex中的state屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

state屬性介紹

state屬性是Vuex中用于存放組件之間共享的數(shù)據(jù)；也就是說(shuō)，我們把一些組件之間共享的狀態(tài)主要存放在state屬性中；它采用的是單一狀態(tài)樹(shù)——用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹(shù)讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

state的使用

在HTML中我們可以直接省略 this 關(guān)鍵字，直接使用 $store.state.狀態(tài)名(變量名) 來(lái)訪問(wèn) vuex 中的存儲(chǔ)的狀態(tài)；

① 抽離出去的state.js文件

export default {
? loadingFlag: true,
? // 用于保存已選類(lèi)別標(biāo)簽
? changedLableList: [
? ? { name: '頭條', class: 'iconfont icon-jinrishouru', url: 'topnews/index' },
? ? { name: '蘋(píng)果', class: 'iconfont icon-pingguoapple', url: "apple/index" },
? ? { name: 'NBA', class: 'iconfont icon-tiyu-lanqiu', url: "nba/index" },
? ? { name: '創(chuàng)業(yè)', class: 'iconfont ?icon-chaxunchuangyebankaitongqingkuang', url: "startup/index" },
? ? { name: '足球', class: 'iconfont icon-swticonzuqiu', url: "football/index" },
? ? { name: '體育', class: 'iconfont icon-paobu', url: "tiyu/index" }
? ]
}

② 在index.js文件中導(dǎo)入state.js文件并注冊(cè)

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import state from './state'
import actions from './actions'
import getters from './getters'
// 安裝插件
Vue.use(Vuex)
// 創(chuàng)建對(duì)象
export default new Vuex.Store({
? state,
? mutations,
? actions,
? getters
})

③ 在組件中使用

<div class="flex-content">
? ? ? ? ? <div class="lable-items" v-for="(item, index) in $store.state.changedLableList" :key="index" @click="decrementTypeLable(index)">
? ? ? ? ? ? <div class="item">
? ? ? ? ? ? ? <div><i :class="item.class"></i></div>
? ? ? ? ? ? ? <span>{{ item.name }}</span>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>

在js代碼中，必須使用 this.$store.state.狀態(tài)名(變量名) 來(lái)訪問(wèn)vuex中存儲(chǔ)的狀態(tài)；

computed: {
? ? title() {
? ? ? return this.$route.meta.title
? ? },
? ? changedLableList() {
? ? ? return this.$store.state.changedLableList
? ? },
? ? alternativeLableList() {
? ? ? return this.$store.state.alternativeLableList
? ? }
? },

擴(kuò)展

為什么要在組件的computed計(jì)算屬性中使用不能放到data屬性中？

data 中的內(nèi)容只會(huì)在 created 鉤子函數(shù)觸發(fā)前初始化一次，類(lèi)似于我們直接寫(xiě) const data = { foo: 123 }這樣，這時(shí)屬性的值是純粹的字面量，而不是所謂的【緩存】(沒(méi)有 Cache Miss 哪來(lái)的緩存？)。JS字面量賦值后顯然不會(huì)自動(dòng)更新。

最簡(jiǎn)單的例子：

let b = ‘xxx' // 相當(dāng)于state中的數(shù)據(jù)
let a = b // 相當(dāng)于data初始化時(shí)，將b的值賦值給了a
b = ‘xyz' // 這時(shí)對(duì)于原始類(lèi)型，a 肯定還是 ‘xxx'

換句話說(shuō)，data 中內(nèi)容依賴(lài)變更時(shí)，data 屬性不會(huì)變更（它的設(shè)計(jì)目標(biāo)就是保存組件的局部狀態(tài)數(shù)據(jù)而已）。而 computed則是通過(guò)【依賴(lài)追蹤】實(shí)現(xiàn)的，在 computed 求值時(shí)引用的 Vue 變量變化時(shí)，會(huì)觸發(fā)對(duì) computed 的重新計(jì)算。所以我們可以使用computed 去引用 Vuex 狀態(tài)變量，從而使得依賴(lài)追蹤生效。或者，將 Vuex 狀態(tài)變量通過(guò) mapState() 方法映射為 computed 也是一個(gè)很方便的選擇。

vuex的State

state 是Vuex中的基本數(shù)據(jù)，state 上存放的就是所謂的狀態(tài)。當(dāng)沒(méi)有使用 state 的時(shí)候，直接在 data 中進(jìn)行初始化，有了 state 之后，我們就把 data 上的數(shù)據(jù)轉(zhuǎn)移到 state 上去了。

單一狀態(tài)樹(shù)

Vuex 使用到的是單一狀態(tài)樹(shù)，即用一個(gè)對(duì)象就包含了全部的狀態(tài)數(shù)據(jù)。也就是說(shuō)如果我們定義了一個(gè) store 的實(shí)例，那么這個(gè) store 實(shí)例里面只有一個(gè) state。state作為構(gòu)造器選項(xiàng)，定義了所有我們需要的基本狀態(tài)參數(shù)。

單一狀態(tài)樹(shù)讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

在Vue組件中獲得 Vuex 狀態(tài)

從store實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)。

示例：

例如我們?cè)趕tate中定義一個(gè)count屬性，給它賦一個(gè)值為10，store.js文件內(nèi)容如下所示：

import Vue from 'vue' // 引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  
const state = {
    count: 10
}
export default new Vuex.Store({
    state
})

然后創(chuàng)建一個(gè) Counter組件，在組件中返回count，內(nèi)容如下所示：

const Counter = {
  template: `<div> count的值為：{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count  //返回store實(shí)例的count狀態(tài)
    }
  }
}

每當(dāng) store.state.count 變化的時(shí)候，都會(huì)重新求取count屬性，并刷新界面。

這種模式依賴(lài)于全局的管理員 store，如果模塊多了，那么每個(gè)模塊或者頁(yè)面只要用到了這個(gè) state 里面的數(shù)據(jù)，都得把 store 引入進(jìn)來(lái)，這樣的操作確實(shí)有點(diǎn)難受。所以出現(xiàn)了下面這種解決辦法。

Vuex 通過(guò)store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件 “注入” 到每一個(gè)子組件中：

new Vue({
  el: '#app',
  store,  // 根組件通過(guò)store選項(xiàng)將store實(shí)例注入所有地子組件
  // 子組件
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

Vue項(xiàng)目的index.html文件內(nèi)容如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>俠課島</title>
  </head>
  <body>
    <h1>俠課島歡迎你</h1>
    <div id="app"></div>
  </body>
</html>

最終我們使用 npm run dev 運(yùn)行項(xiàng)目，瀏覽器中的輸出結(jié)果如下圖所示，如果我們?cè)趕tate中改變count的值，頁(yè)面會(huì)自動(dòng)刷新：

mapState輔助函數(shù)

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

示例：

在使用mapState函數(shù)之前，需要先引入它：

import { mapState } from 'vuex'

引入后才可以開(kāi)始使用，它兩種用法，可以接受一個(gè)對(duì)象或接受一個(gè)數(shù)組。

對(duì)象用法如下：

import { mapState } from 'vuex'
export default {
  // 下面這兩種寫(xiě)法都可以
  computed: mapState({
    // 組件內(nèi)的每一個(gè)屬性函數(shù)都會(huì)獲得一個(gè)默認(rèn)參數(shù)state,然后通過(guò)state直接獲取它的屬性
    count: state => state.count,
    // 'count' 直接映射到state對(duì)象中的count,相當(dāng)于this.$store.state.count
    count: 'count'　
  })
}

數(shù)組用法如下所示：

// 當(dāng)映射的計(jì)算屬性的名稱(chēng)與 state 的子節(jié)點(diǎn)名稱(chēng)相同時(shí)，我們也可以給mapState傳一個(gè)字符串?dāng)?shù)組。
export default {
    computed: mapState([ // 數(shù)組
      'count'
    ])
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: