VueX如何实现数据共享
更新时间：2024年08月31日 10:51:56 作者：SixCandy
这篇文章主要介绍了VueX如何实现数据共享问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1 VueX
1.1 VueX概述
回顾组件之间共享数据的方式：
VueX是实现组件数据（状态）管理的一种机制，可以方便的实现组件之间数据共享。
使用VueX的好处：
- 集中管理共享数据，易于开发和后期维护
- 高效实现组件的数据共享，提高开发效率
- 存在VueX中的数据都是响应式的，能够实时保持数据与页面的同步
1.2 VueX的基本使用
- 安装vuex依赖包
npm i vuex --save
- 导入vuex包
import Vuex from 'vuex' Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store({
//state中存放的就是全局共享数据
state:{count:0}
})- 将store对象挂载到vue中
new Vue ({
el:'#app',
render: h=>h(app),
router,
//将创建的共享数据对象，挂载到vue实例中，所有组件就可以直接从store中获取全局的数据了
store
})1.3 VueX的核心概念
- 1.3.1 State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中
组件访问的state中数据的第一种方式：
this.$store.state.全局数据名称
组件访问的state中数据的第二种方式：
//从vuex中导入mapState函数
import {mapState} from 'vuex'
注释：通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：
//例如：
computed:{
...mapState(['count'])
}
- 1.3.2 Mutation
Mutation用于变更Store的数据
触发 mutation的第一种方式：this.$store.commit()函数
实例代码：
mutations: {
add(state){
//变更状态
state.count++
}
},<template>
<div>
<h3>当前最新的count值：{{this.$store.state.count}}</h3>
<button @click="handle1">+1</button>
</div>
</template>
<script>
export default {
data(){
return{};
},
methods:{
//触发mutation
handle1(){
this.$store.commit('add')
}
}
}
</script>
mutation时传递参数：
mutations: {
addN(state,step){
//变更状态
state.count += step
}
},handle2(){
this.$store.commit('addN',2)
}
触发mutation的第二种方式：
mutations: {
sub(state){
state.count--
},
subN(state,step){
state.count -= step
},
},<template>
<div>
<h3>当前最新的count值：{{count}}</h3>
<button @click="handlersub">-1</button>
<button @click="handlesub2">-2</button>
</div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
computed:{
...mapState(['count'])
},
methods:{
...mapMutations(['sub','subN']),
handlersub(){
this.sub()
},
handlesub2(){
this.subN(2)
}
}
}
</script>
- 1.3.3 Action
Action用于处理异步任务
在actions中不能直接修改state中的数据，必须通过context.commit触发某个mutations中的函数
触发actions的第一种方式：
this.$store.dispatch()
actions中携带参数：
//context是默认参数
addNdely(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
}触发actions的第二种方式：
import {mapActions} from 'vuex';
export default {
methods:{
//触发actions
...mapActions(['addNdely']),
}
}- 1.3.4 Getter
Getter用于对store中的数据进行加工处理形成新的数据
使用getters的第一种方式：
this.$store.getters.函数名称
使用getters的第二种方式：
import {mapGetters} from 'vuex';
export default {
computed:{
...mapGetters(['showNum'])
},
}store.js：
import { setTimeout } from 'core-js'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0
},
getters: {
//这是一个函数
showNum:state =>{
return '最新count:'+state.count
}
},
mutations: {
add(state){
//变更状态
state.count++
},
addN(state,step){
//变更状态
state.count += step
},
sub(state){
state.count--
},
subN(state,step){
state.count -= step
},
},
actions: {
//context是默认参数
addNdely(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
}
},
modules: {
}
})Addi.vue：
<template>
<div>
<h3>当前最新的count值：{{this.$store.state.count}}</h3>
<!-- <h4>getters:{{$store.getters.showNum}}</h4> -->
<h4>getters:{{showNum}}</h4>
<button @click="handle1">+1</button>
<button @click="handle3">+2</button>
<button @click="addNdely">+dely</button>
</div>
</template>
<script>
import { mapMutations,mapActions,mapGetters} from 'vuex';
export default {
computed:{
...mapGetters(['showNum'])
},
methods:{
//触发mutation
...mapMutations(['add','addN']),
...mapActions(['addNdely']),
handle1(){
this.add()
},
handle2(){
this.$store.commit('addN',2)
},
handle3(){
this.$store.dispatch('addNdely',2)
}
}
}
</script>Sub.vue：
<template>
<div>
<h3>当前最新的count值：{{count}}</h3>
<button @click="handlersub">-1</button>
<button @click="handlesub2">-2</button>
</div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
computed:{
...mapState(['count'])
},
methods:{
...mapMutations(['sub','subN']),
handlersub(){
this.sub()
},
handlesub2(){
this.subN(2)
}
}
}
</script>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue选项之propsData传递数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
用vue开发了三四个组件了,都是H5的,现在来看看PC是如何玩转组件的,下面这篇文章主要给大家介绍了关于Vue如何利用flex布局实现TV端城市列表功能的相关资料,需要的朋友可以参考下2023-01-01
unplugin-auto-import的配置以及eslint报错解决详解
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具,这篇文章主要给大家介绍了关于unplugin-auto-import的配置以及eslint报错解决的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue如何判断数组中的对象是否包含某个值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue项目依赖检查depcheck问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue中@路径无法跳转到指定文件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
详解vue项目中如何引入全局sass/less变量、function、mixin
这篇文章主要介绍了详解vue项目中如何引入全局sass/less变量、function、mixin，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本文主要介绍了vite2.0 踩坑，记录了一些在配置项目中遇到的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
最新评论