Vuex中的State

state 是Vuex中的基本数据,state 上存放的就是所谓的状态。当没有使用 state 的时候,直接在 data 中进行初始化,有了 state 之后,我们就把 data 上的数据转移到 state 上去了。单一状态树Vuex 使用到的是单一状态树,即用一个对象就包含了全部的状态数据。也就是说如果我们定义了一个 store 的实例,那么这个 store 实例里面只有一个 state。s...
摘要由CSDN通过智能技术生成

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的值为࿱
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值