Vuex的一些常用知识点介绍

一、为什么要使用Vuex

1、多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。

2、需要全局保存的数据,例如用户、权限信息,全局系统设置

二、Vuex的五个核心属性

1、state:存储状态

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 组件里获取count值$store.state.count

2、getters:state作为第一个参数,其他getters作第二个参数,返回值会根据他的依赖缓存起来,相当于Vue的计算属性

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1,
    sum: 2
  },
  getters: {
    getCountAndSum: (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他组件获取getter$store.getters.getCountAndSum

3、mutations:修改状态(同步的),state 作为第一个参数,提交载荷作为第二个参数

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

4、actions:异步操作(执行mutations的方法,不是直变更状态)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }});// 其他组件调用actions的方法$store.dispatch('increment');

5、modules:store的子模块

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 (获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

三、Vuex辅助函数

<template>
  <div class="about">
    <h1>count: <span>{{count}}</span></h1>
    <h1>getCount: <span>{{$store.getters.getCount}}</span></h1>
    <h1>sum: <span>{{sum}}</span></h1>
    <h1>getSum: <span>{{$store.getters.getSum}}</span></h1>
    <button @click="clickB">test    </button>
  </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'; 
export default {
  name: 'about',
  data () {
    return {
      count: 0,
      sum: 0
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      countAlias: 'count',
      countPlusLocalState (state) {
        return state.count + this.localCount;
      }
    }),
    ...mapGetters([
      'getCount', 'getSum'
    ])
  },
  mounted () {
    this.count = this.$store.state.count;
    this.sum = this.$store.state.a.sum;

  },
  methods:{
    ...mapMutations(
      'add','addO'
    ),
    ...mapActions([
      'add','addO'
    ]),
    clickB () {
      this.$store.dispatch('add');
      this.$store.dispatch('addO');
    }
  }
}</script>
Image placeholder
前端答疑
未设置
  46人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css 常用知识点全在这里了。哪位大侠还能补充?

努力学习与总结是对自己能力的提升,也希望能帮助到同学们。BFC块状格式化上下文(blockformattingcontext)简称BFC:是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的

云原生时代,分布式系统设计必备知识图谱(内含22个知识点)

作者|杨泽强(竹涧)阿里云技术专家我们身处于一个充斥着分布式系统解决方案的计算机时代,无论是支付宝、微信这样顶级流量产品、还是区块链、IOT等热门概念、抑或如火如荼的容器生态技术如Kubernetes

jquery有哪些常用事件?

jquery有哪些常用事件?1、$(document).ready()$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和

有哪些常用jQuery UI框架?

jqueryUI框架1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.设计目标是简

Linux的系统安装和环境介绍笔记

新建虚拟机向导 一定要选择稍后安装 LinuxCentos64位 虚拟机名称:CentosTest 20GB Centos6安装最小内容628MB如果系统小于628MB,会开启简易安装(这样我们学

可能是全网最好的MySQL重要知识点

什么是MySQL?MySQL是一种关系型数据库,在Java企业级开发中非常常用,因为MySQL是开源免费的,并且方便扩展。阿里巴巴数据库系统也大量用到了MySQL,因此它的稳定性是有保障的。MySQL

面试题总结:可能是全网最好的MySQL重要知识点

作者:Snailclimb 整理编辑:SegmentFault本文原载于SegmentFault专栏JavaGuide,如侵删。标题有点标题党的意思,但希望你在看了文章之后不会有这个想法——这篇文章是

这 20 多个高并发编程必备的知识点,你都会吗?

转载自并发编程网–ifeve.comhttp://ifeve.com/%e9%ab%98%e5... 一、前言借用Java并发编程实践中的话”编写正确的程序并不容易,而编写正常的并发程序就更难了”,相

jquery和ajax的区别是什么?

jquery和ajax的区别Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。jQuery是一个库,它对JS进行了封装,使其更方便使用。jQ

UI2CODE再进化!结合Redux的框架升级!

背景UI2CODE的目标是通过分析视觉稿得到对应的代码,让AI提高开发效率。然而过去静态化页面的产出,不能得到业务场景的需求。针对于此,我们以UI2CODE自动化开发为基底,结合Redux的消息机制,

一场HBase2.x的写入性能优化之旅

本文通过实战跑分来展示HBase2.x的写入性能首先,简单介绍一下我们的测试环境:集群由5个节点组成,每个节点有12块800GB的SSD盘、24核CPU、128GB内存;集群采用HBase和HDFS混

一图读懂POLARDB BOX的云原生力量

9月26日,2019杭州云栖大会上,阿里云宣布正式推出高性能数据库一体机——POLARDBBOX,用户部署在自有数据中心即可享受云数据库的便捷体验,同时还为Oracle等传统数据库用户提供一键迁移功能

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

etcd 常用操作介绍

安装 最简单的安装方法是直接去etcdGitHub的Release页下载预编译好的二进制文件。etcd官方为各个系统提供了不同的二进制文件,供开发者根据自己的系统去下载。 下载地址:https://g

etcd 常用操作介绍

安装 最简单的安装方法是直接去etcdGitHub的Release页下载预编译好的二进制文件。etcd官方为各个系统提供了不同的二进制文件,供开发者根据自己的系统去下载。 下载地址:https://g

一些JavaScript 类(class)中需要了解的知识

JavaScript使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在JavaScript中不存在,原型继承仅处理对象。原型继承可以模拟

vue单向数据流介绍

prop是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外,每次父组件更新时,子组件的所有prop都会更新

Pug 介绍和在 Vue 中使用

1介绍pug是一种前端模板引擎,原名jade可用来生成HTML,它的写法类似于CSS中文文档这里先简单举几个🌰#hello a.link-buttonLink Linka(href="https://

一些Vue开发小技巧

下面我们来看一些vue开发小技巧:一、状态共享使用Vue进行开发时,随着项目的复杂化,组件个数也逐渐增加,此时我们就面临着一个问题——多组件状态共享。也许有人说这不是啥问题,Vuex就可以解决啊。是的

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

工程师笔记:我对数据库系统云原生化的一些思考

作者|张敏(于期)阿里云智能高级技术专家划重点我眼中的云原生我认为的云原生关键能力我眼中的云原生化技术手段我对数据库云原生化的思考伴随着云原生技术越来越热门,阿里内部关于CloudNative、Ser