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

 

本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一。

首先我们先了解下vuex的作用

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

vuex流程与vue类比


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

视图通过点击事件,触发methods中的increment方法,可以更改state中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
} },
})

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

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

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

类比:

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

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

更改数据 mutations->methods

获取数据 getters -> computed

数据        state->data

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

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

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

是时候拿出这张图了:

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

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

我们来看看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>

上面例子中actions和mulations的函数名都是一样的,为了方便理解,我把名字取成不一样的,来帮助大家理解。

更改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(状态管理),通俗理解vuex原理,通过vue例子类比的更多相关文章

  1. vuex 状态管理 通俗理解

    解释:集中响应式数据管理,一处修改多处使用,主要应用于大中型项目. 安装: 第一:index.js:(注册store仓库) npm install vuex -D // 下载vuex import V ...

  2. Vuex 状态管理的工作原理

    Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...

  3. vue 通信:父子通信、兄弟通信、跨多层通信、vuex状态管理

    之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...

  4. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  5. vue第十八单元(单向数据流 vuex状态管理)

    第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...

  6. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. Vuex 状态管理模式

    Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题.当我们的应用遇到多个组件共享状态时,会需要: 多个组件依赖于同一状态.传参的方法对于多层嵌套的组件将会 ...

  8. VueX状态管理器 的应用

    VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...

  9. vuex状态管理-数据改变不刷新

    困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...

  10. vuex状态管理demo

    vuex状态管理主要包含四个概念  mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...

随机推荐

  1. HTML学习之==>CSS

    一.CSS选择器 id选择器 class选择器 标签选择器 标签层级选择器 class层级选择器 id层级选择器 id组合选择器 class组合选择器 属性选择器 <!DOCTYPE html& ...

  2. 正则表达式——Unicode 属性

      每一个 Unicode 字符,除了有 Code Point 与之对应外,还具体其他属性,在正则表达式中常用到三种 Unicode 属性: Unicode Property.Unicode Scri ...

  3. 【ABAP系列】SAP ABAP系统变量及注释

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP系统变量及注释 ...

  4. springboot + mybaits + oracle 项目

    1.pom设置 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  5. JS案例经验二

    一 关键词:鼠标事件的触发 可以在函数中指定让鼠标事件自动触发,而不是必须要鼠标滑过才触发,例如: main.onmouseover(); // 可以把该语句看做是鼠标滑过的模拟动作 main是DOM ...

  6. P1540翻译机器

    这是2010提高组第一题,是一个使用队列的模拟题(然而洛谷很多大佬用了最短路) 这道题首先要判断内存中是否已有解释(因为题目已经说了长度很小,所以可以用桶排序),没有的话便去外存找,找到后,存到内存的 ...

  7. Qfile

    打开方式: void AddStudents::write_to_file(QString src){ QFile file("stu.txt"); if (!file.open( ...

  8. 洛谷 P5663 加工零件 & [NOIP2019普及组] (奇偶最短路)

    传送门 解题思路 很容易想到用最短路来解决这一道问题(题解法),因为两个点之间可以互相无限走,所以如果到某个点的最短路是x,那么x+2,x+4也一定能够达到. 但是如何保证这是正确的呢?比如说到某个点 ...

  9. IDEA使用指北教程

    来自官网的指导手册: https://www.jetbrains.com/help/idea/2019.1/run-for-the-first-time.html?section=Windows 记得 ...

  10. 三、JVM — 类加载过程

    类加载过程 加载 验证 准备 解析 初始化 类加载过程 Class 文件需要加载到虚拟机中之后才能运行和使用,那么虚拟机是如何加载这些 Class 文件呢? 系统加载 Class 类型的文件主要三步: ...