热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vuex的简易入门

vuex学习Vuex入门其实很简单当我们项目数据量很庞大的时候比如一个接口数据在多个组件之间重复使用多次我们这里采用的是vue-cli构建的项目目录当然前面的npminstallv

vuex学习

Vuex入门其实很简单 当我们项目数据量很庞大的时候

比如一个接口数据在多个组件之间重复使用多次

我们这里采用的是vue-cli构建的项目目录 

当然前面的npm install vux什么的就不说了

我们创建好store模块之后 首先你要确保你的实例上面有store

 

1.引入store 并且挂载在实例上

 

好,然后,创建目录我们的store的目录大概就是下面这样子

你可以使用单独的actions getters mutations 也可以使用模块化【modules】

我们这里采用的是模块化 modules 比如我们有一个狗【dog】的模块

modules】 对象允许将单一的 Store 拆分为多个 Store 的同时保存在单一的状态树中。随着应用复杂度的增加,这种拆分能够更好地组织代码

 

先来看我们的【store/index.js

这里我们就export一下store store里面是按照模块来的

 

继续 我们开始进入模块【dog.js】

首先你得有一个types吧 对不对 放在外面统一管理就好 后面引入即可

 

然后先看一下整体的代码结构

 

【别着急】我们依次展开了哈

【state

state 定义了应用状态的数据结构,同样可以在这里设置默认的初始状态

 

【mutations

调用 mutations 是唯一允许更新应用状态的地方。

 

【actions

Actions 即是定义提交触发更改信息的描述,常见的例子有从服务端获取数据,在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。

 

【getters

Getters 允许组件从 Store 中获取数据,可以进行筛选等等 这里是可以进行数据操作的

 

最后 【输出一下】

OK了 一个简单的额vuex我们搭建完毕 我们回到我们的组件开始调用 怎么用呢

首先我们需要引入vuex的辅助函数 这里的话我引入三个 方便都看一下效果

辅助函数【mapState】【mapActions】【mapgetters

我们在时间周期 computed的时候引入mapState mapGetters

【注意⚠️】

为什么要把mapState放在这里讲 是因为又个坑

一般而言 我们是直接 是不是很多人都这么做啊 嘻嘻嘻 也没错 前提是你不使用modules

 

我们发现 我们的dogUrl是undefined为什么呢 页面不渲染 打印的时候undefined

但是store里面确实有一个dog下面的dogUrl啊 不对 位置变了!!!!

我们打印一下store 发现了问题 因为我们使用了modules 所以 dogUrl 的位置发生了变化

应该是这样 this.$store.state.dog.dogUrl

而不是这样this.$store.state.dogUrl

所以我们采用第二种写法

 

好了 现在state也是可以直接使用的了

那么 你入门了吗?

 

 

转:https://www.cnblogs.com/vensent-Onion/p/7761724.html



推荐阅读
  • Symfony是一个功能强大的PHP框架,以其依赖注入(DI)特性著称。许多流行的PHP框架如Drupal和Laravel的核心组件都基于Symfony构建。本文将详细介绍Symfony的安装方法及其基本使用。 ... [详细]
  • 本文详细介绍了如何在ECharts中使用线性渐变色,通过echarts.graphic.LinearGradient方法实现。文章不仅提供了完整的代码示例,还解释了各个参数的具体含义及其应用场景。 ... [详细]
  • CentOS7源码编译安装MySQL5.6
    2019独角兽企业重金招聘Python工程师标准一、先在cmake官网下个最新的cmake源码包cmake官网:https:www.cmake.org如此时最新 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 本文详细记录了在基于Debian的Deepin 20操作系统上安装MySQL 5.7的具体步骤,包括软件包的选择、依赖项的处理及远程访问权限的配置。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 本文详细记录了在银河麒麟操作系统和龙芯架构上使用 Qt 5.15.2 进行项目打包时遇到的问题及解决方案,特别关注于 linuxdeployqt 工具的应用。 ... [详细]
  • 本文通过探讨React中Context的使用,解决了在多层级组件间传递状态的难题。我们将详细介绍Context的工作原理,并通过实际案例演示其在项目中的具体应用。 ... [详细]
author-avatar
胡子壮熊_623
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有