vuex学习笔记-核心概念（State）

State

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

1、创建vuex项目

编写app.vue

<template>
  <div id="app">
    <addition></addition>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'

export default {
  name: 'app',
  //注册组件
  components: {
    Addition
  }
}
</script>

<style>
</style>

创建组件Addition

<template>
  <div>
    <h3>当前count值（第一种方式）{{$store.state.count}}</h3>
    <h3>当前count值（第二种方式）{{count}}</h3>
  </div>
</template>
<script>
//按需导入mapState函数
import { mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>
<style lang="less" scoped>
</style>

编写store目录下的index.js

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.全局数据名称 (this. $store.state.count)
• 先按需导入mapState函数： import { mapState } from 'vuex',然后数据映射为计算属性computed:{ ...mapState(['全局数据名称']) }