Vuex简单入门

抽象磷火
• 阅读 2196

Vuex是vue全家桶中最适合大型应用的代码库,可以保存网页应用的历史状态,提供网页回溯功能,管理各个组件的状态和关系。

但对于小型应用来说过于繁重,一个bus-中央总线就可以满足您的需求。

前言

vuex是vue全家桶中最难的一个,而且会感觉比较,在学习之前,建议您先学习:
vue
vue-router
node

简介

在做例子之前,我们需要来了解一下Vuex的思想,避免盲人摸象,如果觉得枯燥的话也可以先看后面的案例,可能会更容易理解。

单向数据流

Vuex内容比较复杂,大家不妨类比组件来看一看,左边是官网单向数据流表,右边是vue组件系统:
Vuex简单入门

    Action : 类似于methods方法,用来改变State中的数据(等会会提到mutations)
    State : 类似于组件中data,用来保存数据(可以提供快照,回溯功能)
    View : 这个是Vuex外的内容,通过action来实现功能,也从state中获取数据

这就是所谓的单向数据流

Vuex的运行机制

Vuex运行机制如下图,在下剪去了一些复杂的内容
Vuex简单入门
简单解释一下图中几个英文单词的意思:
四个元件:
Vue Components :组件,大家应该已经写过很多了
Actions :方法(异步),负责调用mutation里面的方法
Mutations : 方法(里面只能放同步),里面定义了各种方法,用来修改State的内容
State : 说白了就是一个对象,里面用对象储存内容,和data相似
四个动作:
Dispatch:派遣,类似于子组件的$emit
Commit : 触发,使用Vuex实例的commit方法,触发Mutation里面的方法
Mutate : 变更,使用Mutations里面的方法来改变State内容
Render : 实际上属于components组件调用State里面的内容来进行页面渲染

想必大家看完这些已经有点晕了吧,晕就对了,接下来我们来做点简单的实例。

示例

思维导图

做之前,我们先看下示例是如何运行的吧:
Vuex简单入门
vm组件绑定了一个计算属性,从state里面拿值
vm组件侦测到点击事件,告诉store实例:让Action帮我改数据
Action收到领导的命令,告诉下属程序员mutations:给我改数据
Mutations就很听话的改变了State的数据
State作为总受当然很服帖的改变了数据
当然,State里面的数据逃不过vm的眼睛,vm计算属性检测到了数据变化,从而改变了值

示例的初始化

我们新建一个文件夹,新建一个html文件,引入基本的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/vuex"></script>
</head>
<body>
  <div id="app">

  </div>
  <script>
    const store = new Vuex.Store({
      state : {

      },
      actions : {

      },
      mutations : {

      }
    })

    let vm = new Vue({
      el : "#app",
      data : {

      },
      computed : {
      
      },
      methods : {

      }
    })
  </script>
</body>
</html>

以上初始化了我们的项目,其中初始化了
store实例,包括三巨头:state,actions,mutations
vm实例,vue的一个组件而已

好,接下来我们来做一个点击增加数字的网页

html数据渲染

Vuex简单入门
修改如图红框中间的数据,这里我们绑定了

count : 计算属性
counter : 函数,绑定在methods中

好的,接下来修改vm中内容:
Vuex简单入门
解释下参数:

count : 计算属性,返回store里面的值
counter : 函数,使用store的dispatch方法,触发incrementAction 的Action方法

store中数据绑定

Vuex简单入门
解释下几个参数:

count : 数字的计数,和data中数据很像
incrementAction : 触发mutations中的increment方法
increment : 增加数字的值,和methods中函数很像

好的,接下来刷新网页,点击按钮,是不是数字增加了呢了呢?这就是最简单的一个实例。

getter实例--更新中

在vue-cli中使用--更新中

点赞
收藏
评论区
推荐文章
Chase620 Chase620
4年前
vue: 解决vuex页面刷新数据丢失问题
一、问题描述1、一般在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
Dax Dax
4年前
veux的使用
1)说说什么是vuex(下定义)2)vuex解决了哪些问题,为什么要用(必要性)3)怎么使用vuex(使用方法)4)描述vuex原理,提升答案深度(深层原理升华答案)vuex的流程图分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action,Mutations,state),我们来简单的捋一下整个流程:首先vue的组件在响应用户行为交
Chase620 Chase620
4年前
记录Vue项目实现axios请求头带上token
在vue项目中首先npm命令安装axios:npminstallaxiosSaxios的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化vuexpersistedstate插件保存数据npmiSvuexpersistedstateimportpersistedStat
Souleigh ✨ Souleigh ✨
4年前
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。Vuex采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。Vuex4正式版本现已发布。Vuex4的改进重点是兼容性。Vuex4支持Vue3,并提供了与Vuex3完全相同的
九路 九路
4年前
通过一个简单实例了解vuex
简单说明什么是vuex,vuex怎么使用,什么场景下适合使用vuex,vuex文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
可莉 可莉
4年前
了解Vuex状态管理模式
1Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢?vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
Chase620 Chase620
4年前
Vue方向:Vuex状态管理:Action异步函数
1、Action的使用        Action类似于mutation,不同之处在于Action提交的是mutation,而不是直接更改状态,Action可以包含任何的异步操作。2、定义以及使用Action代码3、分发Action代码代码action4、Action函数参数
Carl195 Carl195
4年前
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、VueCLI和Nuxt。也许您在面对这些未知的术语和
徐小夕 徐小夕
4年前
vue高级进阶系列——用typescript玩转vue和vuex
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理,如下图介绍了其管理模式:im
海军 海军
4年前
2021前端技术面试必备Vue:(四)Vuex状态管理
前三章陆续已经更新了Vue基本使用和VueRouter的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站........唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue提供了一种状态管理解决办法Vuex,它的思想和React的R