1. vuex 的作用:

vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据。

2. vuex 流程和 vue 类比:

我们看一下一个简单的vue响应式的例子,vue中的 data 、methods、computed,可以实现响应式。

视图通过点击事件,触发 methods 中的 increment 方法,可以更改 data 中 count 的值,一旦 count 值发生变化,computed 中的函数能够把 getCount 更新到视图。

<div id="app">
<button @click="increment"></button>
{{getcount}}
</app> new Vue({
el: "#app",
// state
data () {
return {
count: 0
}
}, // actions
methods: {
increment () {
this.count++
}
}, // view
computed: {
getCount(){
return this.count
} },
})

(1). 那vuex和这个vue响应式例子有什么关系呢?

我们也可以用vuex来实现同样的功能,来实现vuex与vue的类比。

其实原理都是一样的,在vuex中有四个部分:state 、 mutations 、 actions 、getters

类比:

可以先假设没有 actions的情况下:

他们的对应关系是这样的:

更改数据 mutations->methods
获取数据 getters -> computed
数据        state->data

视图通过点击事件,触发mutations中方法,可以更改state中的数据,一旦state数据发生更改,getters把数据反映到视图。

那么action 又是做什么的呢,可以理解是为了处理异步,而单纯多加的一层。要是没有设计上可以没有这一步。

(2). 那可能很多人有疑问,dispatch,commit,又是做什么的呢?

是时候拿出这张图了:

在 vue 例子中,我们触发的 click 事件,就能触发 methods 中的方法,这是 vue 设计好的。而在 vuex 中则不行了,一定要有个东西来触发才行,就相当于自定义事件 on,emit。vuex 中的 action,mutation 通过 on 自定义的方法,相应的需要 emit 来触发。

他们的关系是这样的: 通过 dispatch 可以触发 actions 中的方法,actions 中的 commit 可以触发 mutations 中的方法。

(3). 我们来看看vuex的示例,来实现vue的同样功能

const store =  new Vuex.Store({

    state: {
count: 0
}, //state的值只能通过mutations来修改
mutations: {
increment(state) {
state.count++
}
}, //this.$store.commit("increment")触发mutations中函数"increment"
actions: {
increment({commit}) {
commit("increment"); //this.$store.commit("increment")
} }, //通过getter中的方法来获取state值
getters: {
getCount(state) {
return state.count
}
}
}) export default store

App.vue

    <template>
  <div id="app">
<button @click="increment">增加</button>
{{this.$store.getters.getCount}}
  </div>
</template> <script>
export default {
methods: {
increment(){
//this.$store.dispatch("increment")触发actions函数"increment"
this.$store.dispatch("increment")
}
}
}
</script>

3. 更改increment函数名-验证对应关系:

通过 dispatch-actions ,commit-mutation 找到了他们之间的连接关系

store.js

  const store =  new Vuex.Store({
state: {
count: 0
},
mutations: {
incrementMutations(state) {
return state.count++
}
}, actions: {
incrementActions({commit}) {
commit("incrementMutations");
} }, //通过getter中的方法来获取state值
getters: {
getCount(state) {
return state.count
}
}
}) export default store main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store' Vue.config.productionTip = false new Vue({
store,
render: h => h(App)
}).$mount('#app')

App.vue

      <template>
  <div id="app">
<div id="app">
<button @click="incrementClick">增加</button>
{{this.$store.getters.getCount}}
</div>
</div>
</template> <script>
export default {
methods: {
incrementClick(){
this.$store.dispatch("incrementActions")
}
}
}
</script>

快速理解 VUEX 原理的更多相关文章

  1. 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比

    通俗理解vuex原理---通过vue例子类比   本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...

  2. 通俗理解vuex原理---通过vue例子类比

    本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...

  3. 快速理解高性能HTTP服务端的负载均衡技术原理(转)

    1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...

  4. Vue学习之--------深入理解Vuex、原理详解、实战应用(2022/9/1)

    @ 目录 1.概念 2.何时使用? 3.搭建vuex环境 3.1 创建文件:src/store/index.js 3.2 在main.js中创建vm时传入store配置项 4.基本使用 4.1.初始化 ...

  5. 脑残式网络编程入门(四):快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  6. 字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8

    原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...

  7. [转帖]十分钟快速理解DPI和PPI,不再傻傻分不清!

    十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...

  8. 深入理解FFM原理与实践

    原文:http://tech.meituan.com/deep-understanding-of-ffm-principles-and-practices.html 深入理解FFM原理与实践 del2 ...

  9. Beam Search快速理解及代码解析

    目录 Beam Search快速理解及代码解析(上) Beam Search 贪心搜索 Beam Search Beam Search代码解析 准备初始输入 序列扩展 准备输出 总结 Beam Sea ...

随机推荐

  1. $exLucas$学习笔记

    本来不打算写了的,,,但是感$jio$理解起来还是有点儿难度的来着,,,$so$还是瞎写点儿趴$QAQ$ $exLucas$主要有三步: 1)唯一分解$mod$并预处理$p^{k}$以内的阶乘 2)计 ...

  2. 我终于懂得如何使用matplotlib进行画图

    一 前言 本篇文章带大家快速入门如何使用matplotlib画出精美数学的图片:看完本篇文章你将获得熟悉并简单使用matplotlib工具,会画基本得折现图,散点图,sin,cos图,一张画布画出多图 ...

  3. IntelliJ IDEA安装教程及使用方法

    IntelliJ IDEA安装教程及使用方法 首先,需要去下载IDEA,直接在百度搜索IntelliJ IDEA,然后找到官网点击进入 进入官网,选择[Download],点击进入,选择自己的操作系统 ...

  4. 使用ASP.NET Core 3.x 构建 RESTful API - 4.2 过滤和搜索

    向Web API传递参数 数据可以通过多种方式来传给API. Binding Source Attributes 会告诉 Model 的绑定引擎从哪里找到绑定源. 共有以下六种 Binding Sou ...

  5. 「CF86D」Powerful array 解题报告

    题面 给出一个\(n\)个数组成的数列\(a\),有\(t\)次询问,每次询问为一个\([l,r]\)的区间,求区间内每种数字出现次数的平方×数字的值 的和 思路: 直接上莫队咯 然后就T了 没学过莫 ...

  6. HTML横向滚动条和文本超出显示三个小圆点

    我们这次要说的就是:现在有很多的公司以及很多的app软件经常使用的两个方法横向滚动条和文本超出三个小圆点 横向滚动条:顾名思义嘛,就是能够一块内容可以横着滑动. 文本超出三个小圆点:文本超出就是当文本 ...

  7. Docker日常常用命令汇总

    一.使用docker镜像/容器 (1)创建容器,且进入命令台 docker run --name 容器名 -i -t ubuntu /bin/bash (2)查看/容器 docker ps #查看正在 ...

  8. creator 2.0版本对于preloadScene函数获取加载进度

    有时候,当我们场景上挂载的资源过多时,我们使用cc.director.loadScene切换场景时会等一段时间才会切换过去,这对游戏的体验是相当不好的.所以我们可以使用cc.director.prel ...

  9. Spring Boot2 系列教程 (十四) | 统一异常处理

    如题,今天介绍 SpringBoot 是如何统一处理全局异常的.SpringBoot 中的全局异常处理主要起作用的两个注解是 @ControllerAdvice 和 @ExceptionHandler ...

  10. cogs 1176. [郑州101中学] 月考 Map做法

    1176. [郑州101中学] 月考 ★★☆   输入文件:mtest.in   输出文件:mtest.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 在上次的月考中B ...