理解Vuex

一、Vuex 是什么?

首先我们来分析一种实际开发中用vue.js的场景,你有n个组件,当你改变一个组件数据的时候需要同时改变其它n个组件的数据,那么我想你可能会对 vue 组件之间的通信感到崩溃 。

这个时候vuex作用就来了,它可以集中管理所有组件共享的数据,做到改一个而是全部组件进行同步更新。什么意思呢?

下面用案例说明:

  1. 单纯依赖于vue.js

  2. 依赖vue.js,也使用了vuex技术

目的是通过对比引出vuex的概念、优势和劣势。现在开始。

假设一个微小的应用,有一个标签显示数字,两个按钮分别做数字的加一和减一的操作。用户界面看起来是这样的:

1、纯vue.js代码:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
<script>
new Vue({
el:'#app',
data () {
return {
count: 0
}
},
methods: {
inc () {
this.count++
},
dec () {
this.count--
}
}
})
</script>

整个代码结构非常清晰,代码是代码,数据是数据。代码就是放在methods数组内的两个函数inc、dec,被指令@click关联到button上。而data内返回一个属性count,此属性通过{{count}}绑定到标签p内。

2、依赖vue.js,也使用了vuex技术

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
inc: state => state.count++,
dec: state => state.count--
}
}) const app = new Vue({
el: '#app',
computed: {
count() {
return store.state.count
}
},
methods: {
inc() {
store.commit('inc')
},
dec() {
store.commit('dec')
}
}
})
</script>

这两个的区别在呢?

1、methods数组还是这两个方法,这和demo1是一样的;但是方法内的计算逻辑,不再是在函数内进行,而是提交给store对象!这是一个新的对象!

2、count数据也不再是一个data函数返回的对象的属性;而是通过计算字段来返回,并且在计算字段内的代码也不是自己算的,而是转发给store对象。再一次store对象!

就是说vuex把组件中的数据和改变数据的方法给抽离出来,进行全局管理,这个时候你改变组件某一数据的时候,改变的全局的数据,那么对于其它通过store.state.count

得到的count数据当然会一起改变咯。

Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。这个状态自管理应用包含以下几个部分:

  • state,驱动应用的数据源;
  • view,以声明方式将 state 映射到视图;
  • actions,响应在 view 上的用户输入导致的状态变化。

二、Store

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

// 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment (state) {
state.count++
}
}
})

现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:

store.commit('increment')

console.log(store.state.count) // -> 1

参考:

链接:到底vuex是什么?

想太多,做太少,中间的落差就是烦恼。想没有烦恼,要么别想,要么多做。上尉【3】

VueJs(14)---理解Vuex的更多相关文章

  1. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...

  2. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  3. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其 ...

  4. 理解vuex的状态管理模式架构

    理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...

  5. 理解Vuex的辅助函数mapState, mapActions, mapMutations用法

    在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的 ...

  6. vuejs学习——vue+vuex+vue-router项目搭建(二)

    前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...

  7. [转]理解Vuex的辅助函数mapState, mapActions, mapMutations用法

    原文地址:https://www.cnblogs.com/tugenhua0707/p/9794423.html 在讲解这些属性之前,假如我们项目的目录的结构如下: ### 目录结构如下: demo1 ...

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

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

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

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

随机推荐

  1. node 项目中 koa2 环境搭建 以及项目发布

    环境搭建: 1.Koa 必须使用 7.6 以上的版本.如果你的版本低于这个要求,就要先升级 Node. 查看node版本方法:node -v 2.使用koa-generator生成器生成项目 安装ko ...

  2. maven阿里云仓库配置

    为了加速项目构建,在maven的settings.xml 文件里配置mirrors的子节点,添加如下mirror: <mirrors> <mirror> <id>a ...

  3. 循环调用dll库的界面时,首次正常,再次无响应

    消息循环错误: 在为使用CPaintManagerUI::MessageLoop()的情况下退出,但却发送了PostQuitMessage(0).

  4. 更新windows补丁时一直卡在搜索更新

    在微软下载好安装补丁Windows8.1-KB2999226-x64后,双击时一直停留在“正在此计算机上搜索”界面. 解决方案: 1.将windows 自动更新设置为:“从不检查更新”  . 2.关闭 ...

  5. Linux---一级/二级目录以及位置目录名/指令

    home目录:普通用户登录进来以后的初始位置(会在home目录下创建一个登录名相同的目录例如  / home / 用户名),如果是超级用户则就是 在根目录 /下的 root目录(也就是 /root) ...

  6. 线程中的队列(queue)

    队列的类型和常用方法 队列是一种数据结构,它类似于列表.但列表是线程不安全的,而队列是线程安全的. python的queue(python3,python2为Queue)提供了3种队列: Queue: ...

  7. 数据结构C语言顺序表

    #include <stdio.h> #include <stdlib.h> typedef int EmenType; typedef struct Node { int d ...

  8. SAP开发系统中开发和配置客户端请求号变更

    假如102为开发客户端,800为配置客户端 正常操作,创建开发请求,应该在102客户端里去创建,但由于操作疏忽开发请求建在了800客户端,如何调整请求到102? 调整步骤:登陆102,SE09找到80 ...

  9. JSON.parse()——Uncaught SyntaxError: Unexpected token \ in JSON at position 1

    背景:项目安全处理方面之一 ——对特殊字符进行编解码(后端编码,前端解码) 特殊字符: "    %22 \    %5C /    %2F &   %26 %   %25 '    ...

  10. html文件上传保存-(.html and string translate into .html )

    //上传h5编辑器编辑的html内容 uploadHtml(newsId?: any) { const news = newsId !== undefined ? newsId : 'new'; le ...