如何搭建并使用Vuex实现Vue组件间的长尾词数据共享？

本文共计1684个文字，预计阅读时间需要7分钟。

目录

1.概念

2.何时使用

3.构建 Vuex 环境

4.Vuex 使用

5.Getters 的使用

6.四个 map 方法的使用

7.模块化 + 命名空间

8.总结

1. 概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2. 何时使用当你的 Vue 应用程序需要维护多个组件的状态时，使用 Vuex 可以帮助你集中管理这些状态，确保状态的一致性和可维护性。

3. 构建 Vuex 环境首先，在你的 Vue 项目中安装 Vuex。然后，创建一个 Vuex 实例，并在 Vue 应用程序中注入这个实例。

4. Vuex 使用通过在 Vuex 实例中定义 mutations、actions 和 getters 来管理状态。

5. Getters 的使用Getters 允许你从 store 的 state 中派生出一些状态，相当于 computed 属性。

6. 四个 map 方法的使用mapState、mapGetters、mapActions 和 mapMutations 是 Vuex 提供的辅助函数，用于简化在组件中访问 Vuex 的状态、getters、actions 和 mutations。

7. 模块化 + 命名空间Vuex 支持模块化，可以将 store 分成模块，每个模块有自己的 state、mutations、actions 和 getters。使用命名空间可以避免不同模块之间的命名冲突。

8. 总结Vuex 是一个强大的状态管理库，可以帮助你更好地组织和管理 Vue 应用程序的状态。通过模块化和命名空间，可以构建可扩展和可维护的 Vuex 应用程序。

目录

• 1.概念
• 2.何时使用
• 3.搭建Vuex环境
• 4.Vuex使用
• 5.getters的使用
• 6.四个map方法的使用
• 7.模块化+命名空间
• 总结

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.初始化数据、配置actions、mutations，操作文件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内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！