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(['全局数据名称']) }