Vue2中 Vuex的使用

核心概念- state状态

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

打开项目中的store.js文件，在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别在于 data 是组件自己的数据, 而 state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

问题: 如何在组件中获取count?

1. 插值表达式 =》 { { $store.state.count }}

2. mapState 映射计算属性 =》 { { count }}

1 原始形式 - 通过仓库直接访问

App.vue

组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下

<h1>state的数据 - {
 { $store.state.count }}</h1>

计算属性 - 将state属性定义在计算属性中 State | Vuex

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

<h1>state的数据 - {
 { count }}</h1>

但是每次, 都这样一个个的提供计算属性, 太麻烦了, 所以我们需要辅助函数 mapState 帮我们简化语法

2 辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

用法 ：

第一步&