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的值为