为什么使用Vuex入门基础_vuex小白帮助

在学习Vuex之前,先了解一下“单向数据流”这个状态自管理应用包含以下几个部分:state,驱动应用的数据源; view,以声明方式将 state 映射到视图; actions,响应在 view 上的用户输入导致的状态变化。(比如请求数据或者修改数据会导致数据源状态改变) 但是遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏,而且特别不方便。如果坚持

为什么使用Vuex入门基础

在学习Vuex之前,先了解一下“单向数据流”

为什么使用Vuex入门基础_vuex小白帮助

为什么使用Vuex入门基础_vuex小白帮助

这个状态自管理应用包含以下几个部分:

但是遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏,而且特别不方便。

如果坚持使用,传参的方法对于多层嵌套的组件将会非常繁琐,各种各样的问题通常会导致无法维护的代码。

所以我们把组件的共享状态抽取出来,以一个全局单例模式管理(惰性单例的设计模式)
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

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

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

对,Vuex核心就是它的store,其中,有三个重要的部分,

Vuex的使用和理解

以下内容基于vue-cli写的,请先完成这一步

通常Vuex会单独写在一个js文件中,

store.js

// 引入vue 和 vuex 模块
import Vue from 'vue'
import Vuex from 'vuex'
// 中间件,使用VueX作为Vue的一个参数
Vue.use(Vuex)

数据,类似组件中的data

const state = {
  // count: 0
}

计算属性,类似组件中的computed

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

用户派发的行为,类似methods

const actions = {
  // increment: ({commit}) => commit('increment')
}

必须通过这一步来修改数据

const mutations = {
  // increment: ({count}) => {
  //   state.count++
  // }
}

导出这个对象

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

然后在main.js的Vue实例中,注册一个store(仓库)

import store from './store'
new Vue({
  ...
  store,
  ...
})

接下来从组件(视图)开始,理解一下这个过程

Vue-component:

用户的特定行为(需要使用Vuex的情况) 会派发一个任务给Actions 或者直接给Mutations

写在App.vue组件中
HTMT

<div @click="add">
  {{ count }}
</div>

JS

methods: {
  add () {
    // 派发一个任务,叫做'increment'
    this.$store.dispatch('increment')
  }
}

Actions:

Actions是用户指定的行为,这里没有异步操作,所以直接commit到Mutations

const actions = {
  // const { commit } = store
  // commit === store.commit
  increment: ({commit}) => commit('increment')
  // es6的写法,它等同于这样:
  // increment ({commit}) {
  //   commit('increment')
  // }
}

Mutations:

Mutations如上所述,修改一下state的数据

const mutations = {
  increment: ({count}) => {
    state.count++
  }
}

state:

state的数据被改变

Vue-component:

最后回到了组件这里,通过计算属性获取到改变的数据并显示到页面上

count () {
  return this.$store.state.count
}

getters

另外,我们希望实现这么一个小的效果:count为偶数时为绿色,奇数时为红色,那么我们在store中通过getters实现(当然在组件中通过计算属性也可以实现,这里只是为了说明getters的作用)

const getters = {
  // evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

在App.vue中的computed中写上

evenOrOdd (state) {
  return this.$store.getters.evenOrOdd
}

在模板中补充一点:

:class="evenOrOdd"

和对应的css:

.even {
  color: green;
}
.odd {
  color: red;
}

转载来源:https://segmentfault.com/a/1190000012070824

海计划公众号
(0)
上一篇 2020/04/06 04:08
下一篇 2020/04/06 04:08

您可能感兴趣的内容

  • easyui中formatter的用法使用攻略_easyui菜鸟攻略

    当我们使用easyui需要对某一列进行格式化处理value数据时,可以使用formatter进行格式化这里以一个商品表举例,商品表中有一个商品类型的字段,数据类型为int,想通过formatter方法来实现:商品类型值为0时,前端将显示“主体商品”。商品类型值为1时,前端将显示“附属商品”。value:字段值 index:行所在索引 js代码: $(fu

    2020/03/26
  • 服务器不稳定对网站有哪些影响?小白入门_网站入门教程

    1、关键词排名下降。关键词排名是站长朋友最关心的,如果网站大部分关键词排名都有一个大幅度的下降,那么恭喜你,你网站被搜索引擎降权了。2、收录减少。当一个网站权重降低时,很多网站里面收录的但质量不高的文章,都会遭到搜索引擎的剔除,收录减少也是非常常见的;严重点的被拔毛,只剩一个首页,也不要太惊讶。对于收录问题,当网站权重有恢复时,还是可以重新收录那些被搜索引擎

    2020/03/30
  • ajax请求 get与post的区别?使用帮助get和post的使用场景_ajax使用攻略

    使用Ajax时,当我们向服务器发送数据时,我们可以采用Get方式请求服务器,也可以使用Post方式请求服务器.那么,Get请求和Post请求的区别到底在哪呢? ajax中的get和post都是向服务器发送的一种请求,只是发送机制不同。 1.参数:GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Aj

    2020/04/05
  • Socket通信原理.一文了解Socket入门指南_Socket小白教程

    什么是 Socket?Socket 的中文翻译过来就是“套接字”。套接字是什么,我们先来看看它的英文含义:插座。Socket 就像一个电话插座,负责连通两端的电话,进行点对点通信,让电话可以进行通信,端口就像插座上的孔,端口不能同时被其他进程占用。而我们建立连接就像把插头插在这个插座上,创建一个 Socket 实例开始监听后,这个电话插座就时刻监听着消息的传

    2020/03/29
  • 一文看懂中国互联网二十年小白基础_互联网基础入门

    以史为镜,可以知兴替。中国互联网,沧海桑田。1、最早在美国上市的中国互联网公司是中华网,域名牛逼,中国概念,一度股价爆高到100多美元,后来一路跌到地板,然后退市,现在,谁还记得呢。2、曾经联想搞了一个fm365.com,联想的互联网战略,非常非常早的事情,随着联想电脑预装铺开,一度号称是国内门户前几名,然后呢?后来一度域名都丢了,然后也没有然后了。3、我们

    2020/04/05
  • crypto.js使用帮助_提供了各种各样的加密算法的js库

    crypto.js指南教程 官方网址:https://github.com/brix/crypto-js GitHub:https://github.com/brix/crypto…

    2020/03/06
  • JS 中创建自定义排序方法小白基础_排序入门知识

    一般情况咱们排序大都按数字或字母顺序,但也有一些情况下,咱们可能需要自定义排序顺序。在此之前先简单介绍一下 reduce 方法:语法:arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])callback:执行数组中每个值的函数,包含四个参数:accu

    2020/03/29
  • CSDN使用帮助专业IT技术发表平台,包含了IT技术,移动开发,Web前端,企业架构,编程语言等

    CSDN基础入门 官方网址:https://www.csdn.net/ 简介描述:专业IT技术发表平台,包含了IT技术,移动开发,Web前端,企业架构,编程语言等

    2020/03/05
  • node为什么不支持import?指南攻略_import基础入门

    nodejs采用的是CommonJS的模块化规范,使用require引入模块;而import是ES6的模块化规范关键字。想要使用import,必须引入babel转义支持,通过babel进行编译,使其变成node的模块化代码。node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,

    2020/03/24
  • CSS实用技巧:文字处理小白帮助_文字菜鸟知识

    前言作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也

    2020/03/24
  • Transfonter使用教程_为设计师和前端开发者提供的在线Font-face生成工具。

    Transfonter小白常识 官方网址:https://transfonter.org/ 简介描述:为设计师和前端开发者提供的在线Font-face生成工具。 This tool…

    2020/03/06
  • 优化 if-else 代码的八种方案小白知识_java菜鸟教程

    优化 if-else 代码的八种方案小白知识 前言 代码中如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文将介绍优化if-else代码的…

    2020/03/20
  • jquery自定义组件开发基础教程_jquery指南教程

    jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法(function ($) {$.fn.ziDinYiZuJian = function () {//ziDinYiZuJian 组件 要实现的功能代码}
    })(jQuery)第二步调用自定义的组件调用组件

    2020/03/31
  • react-native-elements零基础入门_一个高度可定制的跨平台 React Native UI 库

    react-native-elements零基础入门 官方网址:https://react-native-training.github.io/react-native-eleme…

    2020/03/06
  • TypeScript 设计模式之适配器模式小白攻略_模式基础知识入门

    在实际生活中,也存在适配器的使用场景,比如:港式插头转换器、电源适配器和 USB 转接口。 而在软件工程中,适配器模式的作用是解决两个软件实体间的接口不兼容的问题。 使用适配器模式之后,原本由于接口不兼容而不能工作的两个软件实体就可以一起工作。二、优缺点优点将目标类和适配者类解耦,通过引入一个适配器类来重用现有的适配者类,而无须修改原有代码。增加了类的透明性

    2020/03/20
  • svg生成环形进度条使用攻略_svg教程视频

    之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制。具体效果如下图:代码非常简单:<circle r="70" cy="75" cx

    2020/03/26