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']),

  },

}

巴特西

Vuex的核心State

最新文章

热门文章