一、state属性介绍
state属性是Vuex中用于存放组件之间共享的数据;也就是说,我们把一些组件之间共享的状态主要存放在state属性中;它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
二、state的使用
- 在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 也是一个很方便的选择。