Vuex的核心State

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

组件访问State中的数据

第一种方式：this.$store.state.全局数据名称

<h3>当前最新的count值为：{{$store.state.count}}</h3>

第二种方式：导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed计算属性：

<h3>当前最新的count值为：{{ count }}</h3>

import { mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
  },
}