当前位置: 首页 > news >正文

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

http://www.lryc.cn/news/452987.html

相关文章:

  • 使用 vite 快速初始化 shadcn-vue 项目
  • 微信小程序:一个小程序跳转至另一个小程序
  • Java第二阶段---10方法带参---第二节 方法重载(Overloading)
  • Java Web 之 Session 详解
  • 63.5 注意力提示_by《李沐:动手学深度学习v2》pytorch版
  • vscode 的terminal 输出打印行数限制设置
  • 深入挖掘C++中的特性之一 — 继承
  • Linux 下 poll 详解
  • virtualbox配置为NAT模式后物理机和虚拟机互通
  • 工程机械车辆挖掘机自卸卡车轮式装载机检测数据集VOC+YOLO格式2644张3类别
  • [Notepad++] 文本编辑器的下载及详细安装使用过程(附有下载文件)
  • 深入浅出Java多线程(六):Java内存模型
  • 注册了个小趴菜999#it#com
  • UE4 材质学习笔记02(数据类型/扭曲着色器)
  • Linux驱动开发(速记版)--设备树插件
  • 代码报错后如何定位问题
  • Python数据可视化--Matplotlib--入门
  • 美国食品等级FDA认证测试介绍
  • Vue2如何在网页实现文字的逐个显现
  • mybatisplus的查询,分页查询,自定义多表查询,修改的几种写法
  • 括号匹配判断
  • 数据结构(栈和队列的实现)
  • Python批量处理客户明细表格数据,挖掘更大价值
  • NAND Flash虚拟层索引表机制
  • Spring Boot框架:新闻推荐系统开发新趋势
  • RK3568平台(opencv篇)opencv处理图像
  • 【移动端】Viewport 视口
  • PWM 模式
  • 模拟算法(3)_Z字形变换
  • Go语言实现长连接并发框架 - 任务执行流路由模块