state 存储数据和状态

state 全局响应式数据 注册store后 Vue组件可从store中读取数据，不再用父子组件传参或请求接口的方式取全局变量,而通过监听观察数据的更改
js用this.$store.state 属性名获取, 元素标签用 {{$store.state.属性名}} 来获取

#Vuex 用单一状态树 用对象包含应用层级状态 为唯一数据源 SSOT ,每个应用仅包含一个 store 实例
单一状态树让直接定位状态片段，调试过程中也能轻易地取得整个当前应用状态的快照,单状态树和模块化并不冲突
存储在 Vuex 中的数据和 Vue 实例中data 遵循相同的规则
#在 Vue 组件中获得 Vuex 状态
Vue组件中展示状态 Vuex状态存储是响应式的 store 实例中读取状态最简单的方法 是在计算属性返回状态
// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}
store.state.count 变化重新求取计算属性 且触发更新关联的 DOM, 导致组件依赖全局状态单例
模块化构建系统中，需要用 state 的组件中需要频繁导入 在测试组件时需要模拟状态
Vuex 通过 store 选项 提供将状态从根组件 注入每个子组件 需调用 Vue.use(Vuex)
const app = new Vue({
  el: '#app',  //把 store 对象提供给 store 选项 可以 store 实例注入所有的子组件
  store,
  components: { Counter },
  template: `  <div class="app"><counter></counter></div>  `
})
实例中注册 store 选项 该 store 实例注入到根组件下的所有子组件,且子组件能通过 this.$store 访问到 Counter 的实现
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
#mapState 辅助函数
组件需获取多个状态时 将状态都声明为计算属性会重复和冗余,用 mapState 辅助函数生成计算属性 少按几次键
// 单独构建版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
  computed: mapState({   // 箭头函数使代码简练
    count: state => state.count,  // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',   // 为能用 this 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
映射的计算属性名与 state 的子节点名称相同时，可给 mapState 传一个字符串数组
computed: mapState([  // 映射 this.count 为 store.state.count
  'count'
])
#对象展开运算符 mapState 函数返回一个对象
需要用工具函数将多个对象合并为一个,最终对象传给 computed 属性,对象展开运算符极大地简化写法
computed: {
  localComputed () { }, // 用对象展开运算符将此对象混入到外部对象中
  ...mapState({  })
}
#组件仍然保有局部状态
用 Vuex 无需所有状态放入Vuex 否则代码冗长不直观，有状态严格属于单个组件，还是作为组件的局部状态
应该根据应用需要权衡和确定

---

vuex概念之State用法详解
export default new vuex.Store(options:{
  state:{
    count:1
  }
})
普通用法
在组件中直接访问  this.$store.state.count
mapState辅助函数用法
对象展开运算符，默认传递参数state
在函数中直接使用  节省2个单词this.$store
...mapState({
 count: state => state.count
})
mapState辅助函数用法
用 this 获取组件自己的data数据，必须用常规函数
...mapState({
  count: function (state) {
    return state.count + this.localCount
  }
}),
mapState辅助函数用法
在计算属性中直接引用state的数据时直接传递字符串数组
...mapState([
'count'
])
mapState几种用法混合使用
在计算属性中，根据实际需要，灵活的组合用mapState
...mapState({
  countAll: function (state) {
    return state.count + this.localCount
  }
}),
...mapState([
  'count'
])