1Vuex是什么??
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享!!!
2.什么样的数据要存储到vuex
一般情况下,只有组件之间共享的数据,采用必要存储到vuex
3.使用vuex的好处:
可以Vuex中集中管理共享的数据,易于后期的开发和维护
能够高效实现组件之间的数据共享,提高代码的效率
存储在vuex的数据是响应式的,可以保持数据和页面同步
4.导入vuex,创建store 对象
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0
},
mutations: {
},
actions: {
},
modules: {
}
})
创建组件:使用 this.$store.state.count
<template>
<div>
<h3>当前最新的count的值为:{{this.$store.state.count }}</h3>
<button>+1</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
</style>
在app.vue引入
<template>
<div>
<my-add></my-add>
<p>----------------</p>
<my-sub></my-sub>
</div>
</template>
<script>
import Add from './components/Add.vue'
import Sub from './components/Sub.vue'
export default {
data() {
return {
}
},
//注册为app的子组件
components :{
'my-add':Add,
'my-sub':Sub
}
}
</script>
<style lang="scss" scoped>
</style>
组件访问state中数据的第二种方式 : mapState
<template>
<div>
<h3>当前最新的count的值为:{{count}}</h3>
<button>-1</button>
</div>
</template>
<script>
//导入函数mapState
import {mapState} from 'vuex'
export default {
data() {
return {
}
},
//定义计算属性
computed:{
// ...展开运算符,吧全局里面的数据,映射为当前组件的计算属性
...mapState(['count']) //需要使用全局哪个数据,把名称放入数组
}
}
</script>
<style lang="scss" scoped>
</style>
效果图: