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