热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue使用vuex详细讲解

vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种

vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。

那么,我们一起来看看vue项目怎么使用它吧。(如果你对vuex有一定了解,不是刚接触的小白,请忽略第一步,直接查看第二步)

一、适合初学者使用,保存数据以及获取数据

1、在store文件夹,新建个index.js文件(命名看个人习惯,如果没有该文件夹,可以新建一个,当然也可以不建文件夹,直接新建个js文件也是可以的)

在新建的js文件中写入如下代码:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

export default new Vuex.Store({
state:{
pathName: "",
currDbSource: {},
currJobData: {},
DbSource: []
},
mutations:{
// 保存当前菜单栏的路径
savePath(state,pathName){
state.pathName = pathName;
},
// 保存当前点击的数据源
saveCurrDbSource(state,currDbSource){
state.currDbSource = currDbSource;
},
// 保存当前点击的元数据
saveCurrJobData(state,currJobData){
state.currJobData = currJobData;
},
// 保存所有数据源
saveDbSource(state,DbSource){
state.DbSource = DbSource;
}
}
})
这里解释一下各个代码段的作用:state是自定义的一些变量,需要用来保存数据,mutations是用来触发事件,相当于方法,用户需要通过触发这个方法,借此来保存数据,参数的话,第二个参数就是用户传入的值,然后在方法中赋值给state中的变量

2、main.js引用:(注意路径即可)

// 引入vuex-store
import store from './store/index';

new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
3、保存数据:(场景举例:当我点击按钮后,我需要把当前的数据保存到vuex中,然后跳转到别的路由,然后使用这些数据)

methods:{
click(){
// 点击按钮进行一些操作,然后保存数据
this.$store.commit('saveCurrDbSource',this.db)
}
}
这里的第一个参数是要触发的方法,也就是上面mutations中的方法,第二个参数是你要传递的数据

4、获取变量:(当数据初始获取不到时,可以使用计算属性用来获取)

this.$store.state.变量名

// 例如
this.$store.state.currDbSource
这样其他组件就可以共用这个保存起来的数据了,也能进行相应的修改

二、模块化(适合有部分基础的人)

当然,上述方法中我们把所有东西都写在一个文件中了,这样数据多的时候,耦合度太高,也不便于维护,而且mutations也不能解决异步问题,这里就介绍另一种方式以及actions

actions:看过官网介绍的人都知道,这是间接触发mutations方法的一种 " 中间商 ",而且它可以执行异步操作,避免用户去直接操作state

1、state.js :保存所有数据,以对象的方式导出

export default {
pathName: '', // 路由
currDbSource: {}, // 当前数据源
currJobData: {}, // 当前元数据
DbSource: [], // 所有数据源,供元数据界面下拉列表使用
selectJobMeta: {}, // 当前选择的元数据(搜索后点击的单条数据)
specialSubject: [], // 专题数据(多条)
duplicateJobMeta: {}, // 复制的数据
};
2、mutations.js :保存所有方法,用来改变state的数据

// 保存当前菜单栏的路径
export const savePath = (state, pathName) => {
state.pathName = pathName;
};

// 保存当前点击的数据源
export const saveCurrDbSource = (state, currDbSource) => {
state.currDbSource = currDbSource;
};

// 保存当前点击的元数据
export const saveCurrJobData = (state, currJobData) => {
state.currJobData = null;
state.currJobData = currJobData;
};

// 保存所有数据源
export const saveDbSource = (state, DbSource) => {
state.DbSource = DbSource;
};

// 保存搜索后选择的那一条元数据
export const saveSelectJobMeta = (state, selectJobMeta) => {
state.selectJobMeta = selectJobMeta;
};

// 保存搜索的那一类专题
export const saveSpecialSubject = (state, specialSubject) => {
state.specialSubject = specialSubject;
state.selectJobMeta = {};
};

// 保存复制的元数据(名称为空)
export const saveDuplicateJobMeta = (state, duplicateJobMeta) => {
state.duplicateJobMeta = duplicateJobMeta;
};
3、actions.js :暴露给用户使用,借此触发mutations中的方法,保存数据(可执行异步操作)

// 触发保存菜单栏的路径方法
export const savePath = ({ commit }, payload) => {
commit('savePath', payload);
};

// 触发获取当前点击的数据源方法
export const saveCurrDbSource = ({ commit }, payload) => {
commit('saveCurrDbSource', payload);
};

// 触发获取当前点击的元数据方法
export const saveCurrJobData = ({ commit }, payload) => {
commit('saveCurrJobData', payload);
};

// 触发获取所有数据源方法
export const saveDbSource = ({ commit }, payload) => {
commit('saveDbSource', payload);
};

// 触发保存搜索后选择单条元数据方法
export const saveSelectJobMeta = ({ commit }, payload) => {
commit('saveSelectJobMeta', payload);
};

// 触发保存搜索专题数据方法
export const saveSpecialSubject = ({ commit }, payload) => {
commit('saveSpecialSubject', payload);
};

// 触发保存复制元数据方法
export const saveDuplicateJobMeta = ({ commit }, payload) => {
commit('saveDuplicateJobMeta', payload);
};
这里有2种方式:

// 方法一:
export const saveDbSource = (context, payload) => {
context.commit('saveDbSource', payload);
};

// 方法二:
export const saveDbSource = ({ commit }, payload) => {
commit('saveDbSource', payload);
};
第一种是通过 context上下文用来触发事件,一种是直接通过commit,为了保存数据,都需要加第二个参数payload,不然保存到vuex的数据就是空值

4、index.js:引入相应模块,暴露出store,供vue注册后全局使用

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import * as actions from './actions';
import * as mutations from './mutations';

Vue.use(Vuex);

export default new Vuex.Store({
state,
actions,
mutations
});
5、main.js中引入index.js

// 引入vuex-store
import store from './store/index';

new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
6、保存数据

import { mapActions } from 'vuex';

// 2种方式

// 方法一(dispatch)
this.$store.dispatch('saveDbSource', this.DbSource);

// 方法二(映射)
// 1、通过methods方法添加映射关系
methods: {
...mapActions(['saveDbSource'])
}
// 2、使用
this.saveDbSource
这里也有2种保存数据的方法,第一种就是直接操作方法,通过disptach派发给actions,让actions去触发

第二种就是通过在methods中添加映射关系,数组方式,意味着我们可以在数组中写多个方法(这里数组中的每一个方法名是actions.js文件中所定义的方法名),然后在需要使用的地方直接this.方法名即可。当然,也可以直接绑定给html中的某个事件。

值的注意的是,避免和methods中自己定义的其他方法的名字冲突

7、获取数据

import { mapState } from 'vuex';

computed: {
...mapState(['DbSource']),
},
watch: {
DbSource(currVal) {
// 监听mapState中的变量,当数据变化(有值、值改变等),
// 保证能拿到完整的数据,不至于存在初始化没有数据的问题,然后可以赋给本组件data中的变量
this.currVal = currVal;
}
}
通过计算属性,当数据发生改变,我们可以保证拿到的是响应过后的数据,也是数组形式,意味着我们可以拿到多组数据,这里数组中的数据也是state.js中定义的变量(当然,更推荐使用我注释的那段代码,那种写法可以应对当state中存在多模块的情况,比如state.a.xxx,state.b.xxx,其中a和b都是两个模块,各自有对应的数据要存储,也可以自定义我们前面的名字来避免和data中数据重名的情况)

使用的时候,可以直接通过this.变量名拿到,例如本例中的 this.DbSource,我们可以把它赋给我们自定义的变量,也可以直接使用

值的注意的是,避免和data中自己定义的其他变量的名字冲突

至此,我们就完成了vuex的保存以及获取数据,希望对你有所帮助。

当然,我们需要把一vuex中的一组数据过滤,其他组件都共用过滤后的数据,这种情况大家可能会用到getters,这里我就不多赘述了,有兴趣的小伙伴可以自己了解一下。

附上vuex的运行过程,官网的图片:组件派发任务到actions,actions触发mutations中的方法,然后mutations来改变state中的数据,数据变更后响应推送给组件,组件重新渲染

https://blog.csdn.net/qq_43363884/article/details/95948884 



推荐阅读
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • 使用Vue指令实现下拉菜单效果
    使用Vue指令实现下拉菜单效果模仿重庆红岩历史革命博物馆官网的导航栏内容和效果,使用Vue实现。官网地址如下:https:www.hongyan.info官网效果效果图片展示代码展 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 高效的JavaScript异步资源加载解决方案
    本文探讨了如何通过异步加载技术处理网页中大型第三方插件的加载问题,避免将大文件打包进主JS文件中导致的加载时间过长,介绍了实现异步加载的具体方法及其优化。 ... [详细]
  • 解决WebStorm使用Vuewebpack卡顿问题
      我们在使用Vue时,经常会遇到项目卡顿的情况,这主要是因为Vue的webpack打包时会生成一个node_modules模块,该模块内含至少上万个文件,因而往往会造成WebSt ... [详细]
  • 提升工作效率:掌握15个键盘快捷键
    在日常工作中,熟练掌握计算机操作技巧能够显著提升工作效率。本文将介绍15个常用的键盘快捷键,帮助用户更加高效地完成工作任务。 ... [详细]
  • 本文详细记录了腾讯ABS云平台的一次前端开发岗位面试经历,包括面试过程中遇到的JavaScript相关问题、Vue.js等框架的深入探讨以及算法挑战等内容。 ... [详细]
  • 使用 Vue3 Script Setup 语法糖构建双人联机俄罗斯方块
    作为一名前端开发者,Vue3 是一个不可或缺的工具。本文通过一个实战项目——双人联机俄罗斯方块,详细介绍如何利用 Vue3 的 Script Setup 语法糖进行开发,帮助读者掌握最新的前端技术。 ... [详细]
  • EHF频段(5G毫米波频段)的应用与发展
    国际电信联盟(ITU)负责管理卫星业务的频段分配,其中Ka频段因其较高的雨衰减和对器件工艺的高要求,发展相对缓慢。然而,随着C波段和Ku波段卫星轨道资源的枯竭及频率带宽的紧张,Ka频段近年来得到了快速发展。 ... [详细]
  • Vue 实战经验与常见问题总结
    本文总结了 Vue 开发中的一些常见问题和解决方案,包括全局组件的注册、头像显示、背景图路径问题以及 Sass 公用样式的使用方法。 ... [详细]
  • 本文将详细介绍如何在单独的JavaScript文件中使用Vuex进行状态管理。 ... [详细]
  • 本文介绍了如何创建和使用 Vue 插件。Vue 插件主要用于扩展 Vue 的功能,通常是一个包含 install 方法的对象。install 方法接收 Vue 构造函数作为第一个参数,后续参数由插件使用者传递。 ... [详细]
  • 本打算教一步步实现koa-router,因为要解释的太多了,所以先简化成mini版本,从实现部分功能到阅读源码,希望能让你好理解一些。希望你之前有读过koa源码,没有的话,给你链接 ... [详细]
  • ABP框架是ASP.NET Boilerplate的简称,它不仅是一个开源且文档丰富的应用程序框架,还提供了一套基于领域驱动设计(DDD)的最佳实践架构模型。本文将详细介绍ABP框架的特点、项目结构及其在Web API优先架构中的应用。 ... [详细]
  • 作为一名新手开发者,我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用,涉及多个复杂组件(如按钮、图表等)。希望有经验的开发者能够提供指导。 ... [详细]
author-avatar
rare懿然
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有