State

1. 前言

本小节我们将学习和使用 Vuex 中 state 的概念。包括如何创建 state、组件中获取 state、以及辅助函数 mapState 的使用方法。

2. 创建数据仓库

在上一小节中,我们已经给大家写了一个简单的示例,大家一定还记得 Vuex.Store({...}) 这个方法。在 Vuex 中,我们通过该方法创建一个数据仓库,并把数据 state 传入。例如:

const store = new Vuex.Store({
  state: {
    count: 12000,
    name: '慕课网',
    logo: ''
  }
})

那么,创建完数据仓库后,我们怎样才能在 Vue 组件中使用它呢?我们知道,要使用 Vue 需要通过 new Vue() 创建一个 Vue 实例,并传入对象的参数。要在 Vue 中使用 store,只需要在创建 Vue 实例的时候将 store 传入即可:

var vm = new Vue({
  el: '#app',
  store: store
})

3. 在 Vue 组件中获得 Vuex 状态

那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:

实例演示
预览 复制