Vuex - state 状态(获取和使用共享数据)

一、state是什么？

state是状态（数据） ， 类似于vue组件中的data

区别：

1. data ：是组件自己的数据
2. state：是所有组件共享的数据

二、state状态的作用

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
• 在state对象中可以添加我们要共享的数据。

明确如何给仓库 提供 数据，如何 使用 仓库的数据

三、如何使用store数据呢？

首先我们需要在store文件夹中的 index.js
文件中添加数据：

const store = new Vuex.Store({
  // 通过state 可以提供数据 （所有组件共享的数据）
  state: {
    title: '大标题',
    count: 100
  }
})

使用数据的两种方式：

1. 通过store 直接访问
2. 通过辅助函数

---

1. 通过store 直接访问

先找仓库store → 查看状态 state → 使用数据`

在模板中使用vuex数据：{{ $store.state.count}}

在组件逻辑中使用vuex数据：this.$store.state.count

在js中使用vuex数据：store.state.count

• 三种使用的方式，有些不需要this，有些没有不支持this，需要注意

---

2. 通过辅助函数访问(简化)

1. 先导入 mapState函数

import {mapState} from ‘vuex’

2. 使用computed计算属性快速映射仓库中的状态

  computed: {
    ...mapState(['count', 'title'])
  }

3. 就可以直接使用了

从vuex中获取的值:{{ count }}