vue之vuex的使用及举例

Vuex是专门为Vue.js设计的集中式状态管理架构,它允许你将所有的组件共享状态存储在一个单独的地方,即"store",并以相应的规则保证状态以一种可预测的方式发生变化。以下是Vuex的基本使用方法:

一、安装Vuex

对于Vue 2项目,推荐使用与Vue 2兼容的Vuex 3版本。可以通过npm或yarn进行安装:

复制代码

bash复制代码

|---|------------------------------|
| | npm install vuex@3 --save |
| | # 或者 |
| | yarn add vuex@3 --save |

对于Vue 3项目,可以直接安装最新版本的Vuex:

复制代码

bash复制代码

|---|----------------------------|
| | npm install vuex --save |
| | # 或者 |
| | yarn add vuex --save |

二、创建Store

在项目的src目录下创建一个store文件夹,并在其中创建一个index.js文件。这个文件将用于配置和导出Vuex的store。

复制代码

javascript复制代码

|---|-------------------------------------------|
| | // src/store/index.js |
| | import Vue from 'vue'; |
| | import Vuex from 'vuex'; |
| | |
| | Vue.use(Vuex); |
| | |
| | const state = { |
| | // 在这里定义你的状态 |
| | count: 0, |
| | // 其他状态... |
| | }; |
| | |
| | const mutations = { |
| | // 同步修改状态的方法 |
| | increment(state) { |
| | state.count++; |
| | }, |
| | decrement(state) { |
| | state.count--; |
| | }, |
| | // 其他mutations... |
| | }; |
| | |
| | const actions = { |
| | // 异步操作或复杂逻辑,最终调用mutations来修改状态 |
| | incrementAsync({ commit }) { |
| | setTimeout(() => { |
| | commit('increment'); |
| | }, 1000); |
| | }, |
| | // 其他actions... |
| | }; |
| | |
| | const getters = { |
| | // 基于state计算属性,用于获取一些派生状态 |
| | doubleCount: state => state.count * 2, |
| | // 其他getters... |
| | }; |
| | |
| | export default new Vuex.Store({ |
| | state, |
| | mutations, |
| | actions, |
| | getters, |
| | }); |

三、在Vue实例中引入Store

main.js文件中引入并挂载store:

复制代码

javascript复制代码

|---|------------------------------------------|
| | // src/main.js |
| | import Vue from 'vue'; |
| | import App from './App.vue'; |
| | import store from './store/index.js'; |
| | |
| | Vue.config.productionTip = false; |
| | |
| | new Vue({ |
| | render: h => h(App), |
| | store, // 将store挂载到Vue实例上 |
| | }).$mount('#app'); |

四、在组件中使用Vuex

  1. 访问State

在组件中,你可以通过this.$store.state.xxx来访问状态,但更好的做法是使用mapState辅助函数将状态映射为计算属性。

复制代码

javascript复制代码

|---|-------------------------------------|
| | <template> |
| | <div> |
| | <p>Count: {``{ count }}</p> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapState } from 'vuex'; |
| | |
| | export default { |
| | computed: { |
| | ...mapState({ |
| | count: state => state.count, |
| | }), |
| | }, |
| | }; |
| | </script> |

  1. 提交Mutation

你可以通过this.$store.commit('xxx')来提交mutation,同样地,使用mapMutations辅助函数可以将mutation映射为方法。

复制代码

javascript复制代码

|---|--------------------------------------------------|
| | <template> |
| | <div> |
| | <button @click="increment">Increment</button> |
| | <button @click="decrement">Decrement</button> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapMutations } from 'vuex'; |
| | |
| | export default { |
| | methods: { |
| | ...mapMutations(['increment', 'decrement']), |
| | }, |
| | }; |
| | </script> |

  1. 分发Action

你可以通过this.$store.dispatch('xxx')来分发action,使用mapActions辅助函数可以将action映射为方法。

复制代码

javascript复制代码

|---|-------------------------------------------------------------|
| | <template> |
| | <div> |
| | <button @click="incrementAsync">Increment Async</button> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapActions } from 'vuex'; |
| | |
| | export default { |
| | methods: { |
| | ...mapActions(['incrementAsync']), |
| | }, |
| | }; |
| | </script> |

  1. 使用Getters

你可以通过this.$store.getters.xxx来访问getters,使用mapGetters辅助函数可以将getters映射为计算属性。

复制代码

javascript复制代码

|---|---------------------------------------------|
| | <template> |
| | <div> |
| | <p>Double Count: {``{ doubleCount }}</p> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapGetters } from 'vuex'; |
| | |
| | export default { |
| | computed: { |
| | ...mapGetters(['doubleCount']), |
| | }, |
| | }; |
| | </script> |

五、模块化

当项目变得复杂时,可以将store拆分为多个模块(module)。每个模块拥有自己的state、mutations、actions和getters,最后是模块的namespaced属性,用于将模块的状态和操作封装起来,避免命名冲突。

复制代码

javascript复制代码

|---|-------------------------------------------|
| | // src/store/modules/counter.js |
| | const state = { |
| | count: 0, |
| | }; |
| | |
| | const mutations = { |
| | increment(state) { |
| | state.count++; |
| | }, |
| | }; |
| | |
| | const actions = { |
| | incrementAsync({ commit }) { |
| | setTimeout(() => { |
| | commit('increment'); |
| | }, 1000); |
| | }, |
| | }; |
| | |
| | const getters = { |
| | doubleCount: state => state.count * 2, |
| | }; |
| | |
| | export default { |
| | namespaced: true, |
| | state, |
| | mutations, |
| | actions, |
| | getters, |
| | }; |

index.js中引入并使用这些模块:

复制代码

javascript复制代码

|---|---------------------------------------------|
| | // src/store/index.js |
| | import Vue from 'vue'; |
| | import Vuex from 'vuex'; |
| | import counter from './modules/counter'; |
| | |
| | Vue.use(Vuex); |
| | |
| | export default new Vuex.Store({ |
| | modules: { |
| | counter, |
| | }, |
| | }); |

在组件中使用模块化后的状态和操作时,需要指定模块名:

复制代码

javascript复制代码

|---|---------------------------------------------------|
| | <template> |
| | <div> |
| | <p>Count: {``{ count }}</p> |
| | <button @click="increment">Increment</button> |
| | </div> |
| | </template> |
| | |
| | <script> |
| | import { mapState, mapMutations } from 'vuex'; |
| | |
| | export default { |
| | computed: { |
| | ...mapState({ |
| | count: state => state.counter.count, |
| | }), |
| | }, |
| | methods: { |
| | ...mapMutations('counter', ['increment']), |
| | }, |
| | }; |
| | </script> |

以上就是Vuex的基本使用方法,包括安装、创建Store、在Vue实例中引入Store、在组件中使用Vuex以及模块化等。通过Vuex,你可以更方便地管理Vue应用中的状态,提高代码的可维护性和可测试性。

相关推荐
不想有bug的小菜鸟4 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238635 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559606 分钟前
前端代理,解决跨域问题讲解
前端
quitv11 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238120 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星21 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-41 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架