您好,登錄后才能下訂單哦!
這篇“vuex中的state屬性怎么用”文章的知識(shí)點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vuex中的state屬性怎么用”文章吧。
state屬性是Vuex中用于存放組件之間共享的數(shù)據(jù);也就是說,我們把一些組件之間共享的狀態(tài)主要存放在state屬性中;它采用的是單一狀態(tài)樹——用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。這也意味著,每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段,在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。
在HTML中我們可以直接省略 this 關(guān)鍵字 ,直接使用 $store.state.狀態(tài)名(變量名) 來訪問 vuex 中的存儲(chǔ)的狀態(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文件并注冊(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)名(變量名) 來訪問vuex中存儲(chǔ)的狀態(tài);
computed: { title() { return this.$route.meta.title }, changedLableList() { return this.$store.state.changedLableList }, alternativeLableList() { return this.$store.state.alternativeLableList } },
為什么要在組件的computed計(jì)算屬性中使用不能放到data屬性中?
data 中的內(nèi)容只會(huì)在 created 鉤子函數(shù)觸發(fā)前初始化一次,類似于我們直接寫 const data = { foo: 123 }這樣,這時(shí)屬性的值是純粹的字面量,而不是所謂的【緩存】(沒有 Cache Miss 哪來的緩存?)。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ì)于原始類型,a 肯定還是 ‘xxx'
換句話說,data 中內(nèi)容依賴變更時(shí),data 屬性不會(huì)變更(它的設(shè)計(jì)目標(biāo)就是保存組件的局部狀態(tài)數(shù)據(jù)而已)。而 computed則是通過【依賴追蹤】實(shí)現(xiàn)的,在 computed 求值時(shí)引用的 Vue 變量變化時(shí),會(huì)觸發(fā)對(duì) computed 的重新計(jì)算。所以我們可以使用computed 去引用 Vuex 狀態(tài)變量,從而使得依賴追蹤生效?;蛘撸瑢?Vuex 狀態(tài)變量通過 mapState() 方法映射為 computed 也是一個(gè)很方便的選擇。
state 是Vuex中的基本數(shù)據(jù),state 上存放的就是所謂的狀態(tài)。當(dāng)沒有使用 state 的時(shí)候,直接在 data 中進(jìn)行初始化,有了 state 之后,我們就把 data 上的數(shù)據(jù)轉(zhuǎn)移到 state 上去了。
Vuex 使用到的是單一狀態(tài)樹,即用一個(gè)對(duì)象就包含了全部的狀態(tài)數(shù)據(jù)。也就是說如果我們定義了一個(gè) store 的實(shí)例,那么這個(gè) store 實(shí)例里面只有一個(gè) state。state作為構(gòu)造器選項(xiàng),定義了所有我們需要的基本狀態(tài)參數(shù)。
單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段,在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(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屬性,并刷新界面。
這種模式依賴于全局的管理員 store,如果模塊多了,那么每個(gè)模塊或者頁(yè)面只要用到了這個(gè) state 里面的數(shù)據(jù),都得把 store 引入進(jìn)來,這樣的操作確實(shí)有點(diǎn)難受。所以出現(xiàn)了下面這種解決辦法。
Vuex 通過store 選項(xiàng),提供了一種機(jī)制將狀態(tài)從根組件 “注入” 到每一個(gè)子組件中:
new Vue({ el: '#app', store, // 根組件通過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> <h2>俠課島歡迎你</h2> <div id="app"></div> </body> </html>
最終我們使用 npm run dev 運(yùn)行項(xiàng)目,瀏覽器中的輸出結(jié)果如下圖所示,如果我們?cè)趕tate中改變count的值,頁(yè)面會(huì)自動(dòng)刷新:
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題,我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性,讓你少按幾次鍵。
示例:
在使用mapState函數(shù)之前,需要先引入它:
import { mapState } from 'vuex'
引入后才可以開始使用,它兩種用法,可以接受一個(gè)對(duì)象或接受一個(gè)數(shù)組。
對(duì)象用法如下:
import { mapState } from 'vuex' export default { // 下面這兩種寫法都可以 computed: mapState({ // 組件內(nèi)的每一個(gè)屬性函數(shù)都會(huì)獲得一個(gè)默認(rèn)參數(shù)state,然后通過state直接獲取它的屬性 count: state => state.count, // 'count' 直接映射到state對(duì)象中的count,相當(dāng)于this.$store.state.count count: 'count' }) }
數(shù)組用法如下所示:
// 當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí),我們也可以給mapState傳一個(gè)字符串?dāng)?shù)組。 export default { computed: mapState([ // 數(shù)組 'count' ]) }
以上就是關(guān)于“vuex中的state屬性怎么用”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對(duì)大家有幫助,若想了解更多相關(guān)的知識(shí)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。