共计 1699 个字符,预计需要花费 5 分钟才能阅读完成。
state 是 Vuex
中的基本数据,state 上存放的就是所谓的状态。当没有使用 state 的时候,直接在 data
中进行初始化,有了 state 之后,我们就把 data 上的数据转移到 state 上去了。
单一状态树
Vuex
使用到的是单一状态树,即用一个对象就包含了全部的状态数据。也就是说如果我们定义了一个 store 的实例,那么这个 store 实例里面只有一个 state。state 作为构造器选项,定义了所有我们需要的基本状态参数。
单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
在 Vue 组件中获得 Vuex 状态
从 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>
<h1> 侠课岛欢迎你 </h1>
<div id="app"></div>
</body>
</html>
最终我们使用 npm run dev
运行项目,浏览器中的输出结果如下图所示,如果我们在 state 中改变 count 的值,页面会自动刷新:
mapState 辅助函数
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 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'
])
}
链接:https://www.9xkd.com/