本文主要通过简单的理解来解释下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. 荣耀A55高调上市仅仅为孤独求败?

        坦白说.华为近年来在手机市场上确实取得了一些成绩.比方之前P6的出现就凭借超薄的设计.突出的性价比让大家看到了国产手机的新希望.按理说.在手机市场上尝到甜头的华为应该继续坚持低价.亲民的路线, ...

  2. FPGA设计中的电源管理(转载)

    过去,FPGA设计者主要关心时序和面积使用率问题.但随着FPGA不断取代ASSP和ASIC器件,设计者们现正期望能够开发低功耗设计,在设计流程早期就能对功耗进行正确估算,以及管理和对与FPGA相关的各 ...

  3. assert 的理解

    assert 可以实现如下功能: 保证参数之间的大小等约束关系: 函数执行过程中得到的中间结果是否符合预期: def gen_batch(batch_size, skip_window, num_sk ...

  4. 如何使用通用pe工具箱破解开机密码

    下载最新版的通用pe工具箱将u盘制作成启动盘,接着重启连续按热键进入到bios系统下,设置u盘为第一启动,保存重启. 1.这时候会进入通用pe工具箱的选择界面,我们选择第八个“运行Windows登陆密 ...

  5. P2617 Dynamic Ranking

    题目描述 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i],a[i+1],a[i+2]……a[j]中第k小的数是多少(1≤k≤ ...

  6. OpenCV中Mat数据的访问报错

    最近再写一段程序的时候,要访问Mat中的元素.在定义Mat型数据的时候,用 Mat ObjectPoints(48,3,CV_32FC1,0) 对其进行初始化后,用at进行访问时报内存错误. Mat ...

  7. [Chromium文档转载,第006章]Chrome IPC To Mojo IPC Cheat Sheet

    For Developers‎ > ‎Design Documents‎ > ‎Mojo‎ > ‎ Chrome IPC To Mojo IPC Cheat Sheet 目录 1 O ...

  8. 重新安装python2.6 和 yum (不可以直接安装yum yum 依赖于python2.6)

    (升级或卸载Python导致 yum出错) 一: 升级python导致yum出错 1. cd  /usr/bin/yum 2.  #!/usr/bin/python 修改为    #!/usr/bin ...

  9. PHP如何去掉多维数组的重复值

    1.定义函数 function array_unique_new($arr){ $t = array_map('serialize', $arr);//利用serialize()方法将数组转换为以字符 ...

  10. boost.property_tree的高级用法(你们没见过的操作)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前一阵写项目,终于将这个boost下的xml读取类完成了,由于网上对property_trees的讲解很少,最多也就到get_child这个层面, ...