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)試的過程中也能輕易地取得整個當前應(yīng)用狀態(tài)的快照。
state的使用
在HTML中我們可以直接省略 this 關(guān)鍵字 ，直接使用 $store.state.狀態(tài)名(變量名) 來訪問 vuex 中的存儲的狀態(tài)；
① 抽離出去的state.js文件
export default {
? loadingFlag: true,
? // 用于保存已選類別標簽
? 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
? ? }
? },擴展
為什么要在組件的computed計算屬性中使用不能放到data屬性中？
data 中的內(nèi)容只會在 created 鉤子函數(shù)觸發(fā)前初始化一次，類似于我們直接寫 const data = { foo: 123 }這樣，這時屬性的值是純粹的字面量，而不是所謂的【緩存】(沒有 Cache Miss 哪來的緩存？)。JS字面量賦值后顯然不會自動更新。
最簡單的例子：
let b = ‘xxx' // 相當于state中的數(shù)據(jù) let a = b // 相當于data初始化時，將b的值賦值給了a b = ‘xyz' // 這時對于原始類型，a 肯定還是 ‘xxx'
換句話說，data 中內(nèi)容依賴變更時，data 屬性不會變更（它的設(shè)計目標就是保存組件的局部狀態(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)。當沒有使用 state 的時候，直接在 data 中進行初始化，有了 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)試的過程中也能輕易地取得整個當前應(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)
}
}
}
每當 store.state.count 變化的時候，都會重新求取count屬性，并刷新界面。
這種模式依賴于全局的管理員 store，如果模塊多了，那么每個模塊或者頁面只要用到了這個 state 里面的數(shù)據(jù)，都得把 store 引入進來，這樣的操作確實有點難受。所以出現(xiàn)了下面這種解決辦法。
Vuex 通過store 選項，提供了一種機制將狀態(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 運行項目，瀏覽器中的輸出結(jié)果如下圖所示，如果我們在state中改變count的值，頁面會自動刷新：
mapState輔助函數(shù)
當一個組件需要獲取多個狀態(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ù)都會獲得一個默認參數(shù)state,然后通過state直接獲取它的屬性
count: state => state.count,
// 'count' 直接映射到state對象中的count,相當于this.$store.state.count
count: 'count'
})
}
數(shù)組用法如下所示：
// 當映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時，我們也可以給mapState傳一個字符串數(shù)組。
export default {
computed: mapState([ // 數(shù)組
'count'
])
}
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue與后臺Api進行交互通常是利用vue-resource來實現(xiàn)的，本質(zhì)上vue-resource是通過http來完成AJAX請求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下2018-11-11
Vue2.x配置路由導(dǎo)航守衛(wèi)實現(xiàn)用戶登錄和退出
之前在Vue的學(xué)習(xí)中通過路由導(dǎo)航守衛(wèi)控制實現(xiàn)了用戶登錄模塊的功能，本文基于Vue2.x進行實現(xiàn)，在此將實現(xiàn)過程進行記錄與總結(jié)，感興趣的可以了解一下2021-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)多標簽選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法
本文主要介紹了elementUI el-form 數(shù)據(jù)無法賦值且不報錯解決方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要介紹了vue如何加載本地json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue.js中該如何自己維護路由跳轉(zhuǎn)記錄的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
在本篇文章里小編給大家分享了關(guān)于VUE前后端學(xué)習(xí)tab寫法實例以及相關(guān)知識點，需要的朋友們參考下。2019-08-08
這篇文章主要介紹了Vue之請求如何傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04