state状态

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

定义

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

在外部访问

• 模板中： {{$store.state.xxx}}

• 组件逻辑中 ：this.$store.state.xxx

• JS模块中： 1. 导入store后，store.state.xxx 2.通过辅助函数mapState获取

辅助函数mapState

通过辅助函数mapState获取方法：

1. 导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

    2. 采用数组形式引入state属性

mapState(['count'])

   3. 利用展开运算符将导出的状态映射给计算属性

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

  4. 使用

<div> state的数据：{{ count }}</div>