本文主要通过简单的理解来解释下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>

参考资料:

本文的图片来源一篇英文文章:Intro to Vuex,感兴趣的可以去看下。

通俗理解vuex原理---通过vue例子类比的更多相关文章

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

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

  2. 快速理解 VUEX 原理

    1. vuex 的作用: vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据. 2. vuex 流程和 vue 类比: 我们看一下一个简单的vu ...

  3. 大白话5分钟带你走进人工智能-第31节集成学习之最通俗理解GBDT原理和过程

    目录 1.前述 2.向量空间的梯度下降: 3.函数空间的梯度下降: 4.梯度下降的流程: 5.在向量空间的梯度下降和在函数空间的梯度下降有什么区别呢? 6.我们看下GBDT的流程图解: 7.我们看一个 ...

  4. 大白话5分钟带你走进人工智能-第32节集成学习之最通俗理解XGBoost原理和过程

    目录 1.回顾: 1.1 有监督学习中的相关概念 1.2  回归树概念 1.3 树的优点 2.怎么训练模型: 2.1 案例引入 2.2 XGBoost目标函数求解 3.XGBoost中正则项的显式表达 ...

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

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

  6. vuex 状态管理 通俗理解

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

  7. Redis Hyperloglog的原理及数学理论的通俗理解

    redis中有一种数据格式,hyperloglog,本文就此数据结构的作用.redis的实现及其背后的数学原理作一个整理.当然本文不包含任何数学公式,而是希望用直观的例子帮大家理解. 主要内容如下: ...

  8. Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)

    在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...

  9. Vue学习之--------深入理解Vuex之getters、mapState、mapGetters(2022/9/3)

    这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...

随机推荐

  1. CodeForces 550E Brackets in Implications(构造)

    [题目链接]:click here~~ [题目大意]给定一个逻辑运算符号a->b:当前仅当a为1b为0值为0,其余为1,构造括号.改变运算优先级使得最后结果为0 [解题思路]: todo~~ / ...

  2. BZOJ 1146 二分+链剖+线段树+treap

    思路: 恶心的数据结构题-- 首先 我们 链剖 把树 变成序列 再 套一个 区间 第K大就好了-- 复杂度(n*log^4n) //By SiriusRen #include <cstdio&g ...

  3. js实现日期转换方法

    //方法1function timeStamp1String(time) { var datetime = new Date(); datetime.setTime(time); var year = ...

  4. Coderfroces 862 C. Mahmoud and Ehab and the xor

    C. Mahmoud and Ehab and the xor Mahmoud and Ehab are on the third stage of their adventures now. As ...

  5. installp 操作

    installp  软件安装和升级工具     1.查看某个已应用更可被提交或拒绝的文件集) installp -s   2. 应用更新TCP/IP软件( /usr/sys/inst.images ) ...

  6. A start job is running for Network Manager wait online (29s / no limit) 等待30s解决办法

    电脑安装openSUSE42.3和 Ubuntu16.04 双系统,当电脑插上网线后开机会出现A start job is running for Network Manager wait onlin ...

  7. [USACO07JAN]平衡的阵容Balanced Lineup RMQ模板题

    Code: #include<cstdio> #include<algorithm> using namespace std; const int maxn = 50000 + ...

  8. ES6特性-带标签的模板字符串(tagged template)

    tagged template: 加在模板字符串前面加一个标签(函数). let dessert = = '甜品' drink = '茶' let breakfast = kitchen`今天的早餐是 ...

  9. mysql索引工作原理、分类

    一.概述 在mysql中,索引(index)又叫键(key),它是存储引擎用于快速找到所需记录的一种数据结构.在越来越大的表中,索引是对查询性能优化最有效的手段,索引对性能影响非常关键.另外,mysq ...

  10. Swift学习笔记(4)--字符串及基本使用

    String是例如“hello, world”,“海贼王” 这样的有序的Character(字符)类型的值的集合,通过String类型来表示. Swift 的String类型与 Foundation  ...