文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vuex(多组件数据共享的Vue插件)搭建与使用

2022-11-13 19:00

关注

1.概念

在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态(数据)进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

2.何时使用

多个组件需要共享数据时。

3.搭建Vuex环境

1.创建文件:src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
​
//准备actions对象-响应组件中用户的行为
const actions = {}
//准备mutations对象-修改state中的状态(数据)
const mutations = {}
//准备state对象-保存具体数据
const state = {}
​
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.在main.js中创建vm时传入store配置项

...
import store from './store/index.js'
...
​
//
new Vue({
    el:'#app',
    render:h => h(App),
    store
})

4.Vuex使用

1.初始化数据、配置actionsmutations,操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
​
//准备actions对象-响应组件中用户的行为
const actions = {
    //响应组件中jia的动作
    jia(context,value){
        context.commit('JIA',value)
    }
}
//准备mutations对象-修改state中的状态(数据)
const mutations = {
    //执行JIA
    JIA(state,value){
        state.sum+=value
    }
}
//准备state对象-保存具体数据
const state = {
    sum:0
}
​
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.组件中读取Vuex中的数据:$store.state.sum

3.组件中修改Vuex中的数据:$store.dispatch('actions中的方法名',数据)$store.commit('mutations中的方法名',数据)

<!--备注:若没有网络请求或其他业务逻辑,组件可以越过actions,即不写`dispatch`,直接编写`commit`-->

5.getters的使用

1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。

2.在store.js中追加getters配置

...
const getters = {
    bigSum(state){
        return state.sum*10
    }
}
​
//创建并暴露store
export default new Vuex.Store({
    ...
    getters
})

3.组件中读取数据:$store.getters.bigSum

6.四个map方法的使用

1.mapState方法:用于帮助我们映射state中的数据为计算属性

computed:{
    //借助mapState生成计算属性:sum、school、subject(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
 
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
}

2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性

computed:{
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapState({bigSum:'bigSum'}),
 
    //借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapState(['bigSum']),
}

3.mapActions方法:用于帮助我们生成与actions对话的方法,即包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象写法)
    ...mapState({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
 
    //靠mapActions生成:incrementOdd、incrementWait(数组写法)
    ...mapState(['incrementOdd':'jiaOdd','incrementWait':'jiaWait']),
}

4.mapMutations方法:用于帮助我们生成与mutations对话的方法,即包含$store.commit(xxx)的函数

methods:{
    //靠mapMutations生成:increment、decrement(对象写法)
    ...mapState({increment:'jia',decrement:'jian'}),
 
    //靠mapMutations生成:increment、decrement(数组写法)
    ...mapState(['increment':'jia','decrement':'jian']),
}

<!--备注:mapActions与mapMutations,若需要传递参数:需要在模板中绑定事件时传递好参数,否则参数是事件对象。-->

7.模块化+命名空间

1.目的:让代码更好维护,让数据分类更加明确。

2.修改store.js

const countAbout = {
    namespaced:true,//开启命名空间
    state:{...},
    actions:{
        jiaOdd(context,数据){...}
    },
    mutations:{
        jia(state,数据){...}
    },
    getters{
        bigSum(state){...}
    }
}
​
const personAbout = {
    namespaced:true,//开启命名空间
    state:{
        list:[...]
    },
    actions:{...},
    mutations:{...},
    getters{...}
}
           
const store = new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

3.开启命名空间后,组件读取state数据:

//方式一:自己读取
this.$store.state.personAbout.list
//方式二:借助mapState读取
...mapState('personAbout',['list'])

4.开启命名空间后,组件读取getters数据:

//方式一:自己读取
this.$store.getters['countAbout/bigSum']
//方式二:借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后,组件中调用dispatch:

//方式一:自己直接dispatch
this.$store.dispatch('countAbout/jiaOdd',数据)
//方式二:借助mapActions读取
...mapActions('countAbout',['incrementOdd':'jiaOdd'])

6.开启命名空间后,组件中调用commit:

//方式一:自己直接commit
this.$store.commit('countAbout/jia',数据)
//方式二:借助mapMutations读取
...mapMutations('countAbout',['increment':'jia'])

总结

到此这篇关于Vuex(多组件数据共享的Vue插件)搭建与使用的文章就介绍到这了,更多相关多组件数据共享Vue插件Vuex内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯