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应用中的状态,提高代码的可维护性和可测试性。

相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel5 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu10 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript