快捷導(dǎo)航

vuex中的state屬性解析

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

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

state屬性介紹

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

state的使用

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

① 抽離出去的state.js文件

export default {
? loadingFlag: true,
? // 用于保存已選類別標(biāo)簽
? changedLableList: [
? ? { name: '頭條', class: 'iconfont icon-jinrishouru', url: 'topnews/index' },
? ? { name: '蘋果', 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文件并注冊

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)建對象
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)名(變量名) 來訪問vuex中存儲的狀態(tài)；

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

擴(kuò)展

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

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

最簡單的例子：

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

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

vuex的State

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

單一狀態(tài)樹

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

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

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

從store實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)。

示例：

例如我們在state中定義一個count屬性，給它賦一個值為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)建一個 Counter組件，在組件中返回count，內(nèi)容如下所示：

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

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

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

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

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

Vue項目的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)行項目，瀏覽器中的輸出結(jié)果如下圖所示，如果我們在state中改變count的值，頁面會自動刷新：

mapState輔助函數(shù)

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

示例：

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

import { mapState } from 'vuex'

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

對象用法如下：

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

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

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

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

您可能感興趣的文章: