vuex所有核心概念完整解析State Getters Mutations Actions

vuex是解决vue组件和组件间相互通信而存在的,vuex理解起来稍微复杂,但一旦看懂则即为好用:

安装:

npm install --save vuex

引入

import Vuex from ‘vuex‘
import Vue from ‘vue‘
Vue.use(Vuex)

vuex的几个参数的介绍

State         储存初始化数据

Getters      对State 里面的数据二次处理(对数据进行过滤类似filter的作用)比如State返回的为一个对象,我们想取对象中一个键的值用这个方法

Mutations   对数据进行计算的方法全部写在里面(类似computed) 在页面中触发时使用this.$store.commit(‘mutationName‘) 触发Mutations方法改变state的值

Actions      处理Mutations中已经写好的方法 其直接触发方式是 this.$store.dispatch(actionName)

我们先不急着了解更多先打印下Vuex

console.log(Vuex) //Vuex为一个对象里面包含
Vuex ={
    Store:function Store(){},
    mapActions:function(){},    // 对应Actions的结果集
    mapGetters:function(){},    //对应Getters的结果集
    mapMutations:function(){},  //对应Mutations的结果集
    mapState:function(){},      //对应State的结果集
    install:function install(){}, //暂时不做讲解
    installed:true //暂时不做讲解
}
//如果我们只需要里面的State时我们可以这样写
import { mapState } from ‘vuex‘;
import { mapGetters, mapMutations } from ‘vuex‘; //如果需要引用多个时用这种方式处理

反复看上面的内容是不是就豁然开朗了接下来我们进行依次举例和用官方的语言描述

State

State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态

//store为实例化生成的
import store from ‘./store‘ 

new Vue({
  el: ‘#app‘,
  store,
  render: h => h(App)
})

这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:  

//./store文件
const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {
          //在这里改变state中的数据
          state.count = 100;
       }
  },
  // 异步的数据操作
  actions: {      //放置actions方法
       actionName({ commit }) {
          //dosomething
         commit(‘mutationName‘)
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;

          })
          .catch((error) => {  // 错误处理
              console.log(error);
          });
      }
  }
});
export default store;

后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如

import {mapState} from ‘vuex‘

export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

Getters

有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

在组件中使用方式

import {mapGetters} from ‘vuex‘

export default {
computed: mapGetters([
‘strLength‘
])
}

Mutations

Mutations的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是,定义的mutation必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。

在组件中触发:

export default {
  methods: {
    handleClick() {
      this.$store.commit(‘mutationName‘)
    }
  }
}

或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。如:

import {mapMutations} from ‘vuex‘
export default {
  methods: mapMutations([
    ‘mutationName‘
  ])
}

Actions

Actions也可以用于改变状态,不过是通过触发mutation实现的,重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似,也是绑定在组件的methods上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)方法。

在组件中使用

import {mapActions} from ‘vuex‘
//我是一个组件
export default {
  methods: mapActions([
    ‘actionName‘,
  ])
}

Plugins

插件就是一个钩子函数,在初始化store的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。

//写在./store文件中
import createLogger from ‘vuex/dist/logger‘
const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})
时间: 2024-10-14 22:05:04

vuex所有核心概念完整解析State Getters Mutations Actions的相关文章

vuex及其五大核心功能运用解析

什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 什么情况下使用vuex? 如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的.确实是如此——如果您的应用够简单,您最好不要使用 Vuex.一个简单的 store 模式就足够您所需了.但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择. vuex流

vuex的5个核心概念四(modules)

5.mudules(模块) vuex使用单一状态树,那么就意味着很多状态都会交给来管理.当应用变得非常复杂时,store对象就会变得非常臃肿. 为了解决这个问题,vuex允许我们将store分割成模块(module),而每个模块拥有自己的state actions getters mutations等  (1).创建一个模块(A),并在stores/index.js中导入引用(这时store里面的state就会有a如果想引用a中的数据就是:this.$store.state.a.属性名) (2)

kafka核心概念与应用场景解析

kafka核心概念与应用场景解析 Kafka的主要特点 Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一个分布式的,可划分的,冗余备份的持久性的日志服务,它主要用于处理活跃的流式数据. kafka的主要特点: 同时为发布和订阅提供高吞吐量.据了解,Kafka每秒可以生产约25万消息(50 MB),每秒处理55万消息(110 MB). 可进行持久化操作.将消息持久化到磁盘,因此可用于批量消费,例如ETL,以及实时应用程序.通过

应用数据流状态管理框架Redux简介、核心概念及工作流

前几天给大家谈了谈React 不过它只是一个侧重于UI的框架 只能算作是MVC中的V(View视图) 而且只是DOM的一个抽象层,不是Web应用完整解决方案 如果仅仅用它构建大型项目 你会非常的吃力 简介 14年,Facebook提出Flux架构意图解决这个问题 15年,Dan Abramov将 Flux 与函数式编程相结合,创造了Redux,由于简单易学就开始流行起来 16年,Dan Abramov被facebook挖走了 Redux体积很小,如果删掉源码的空行和注释,连500行代码都不到 别

十分钟带你理解Kubernetes核心概念

本文将会简单介绍Kubernetes的核心概念.因为这些定义可以在Kubernetes的文档中找到,所以文章也会避免用大段的枯燥的文字介绍.相反,我们会使用一些图表(其中一些是动画)和示例来解释这些概念.我们发现一些概念(比如Service)如果没有图表的辅助就很难全面地理解.在合适的地方我们也会提供Kubernetes文档的链接以便读者深入学习.这就开始吧. 什么是Kubernetes? Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部署,调度和节点集群间扩展.如果你曾

ElasticSearch笔记整理(二):CURL操作、ES插件、集群安装与核心概念

[TOC] CURL操作 CURL简介 curl是利用URL语法在命令行方式下工作的开源文件传输工具,使用curl可以简单实现常见的get/post请求.简单的认为是可以在命令行下面访问url的一个工具.在centos的默认库里面是有curl工具的,如果没有请yum安装即可. curl -X 指定http的请求方法 有HEAD GET POST PUT DELETE -d 指定要传输的数据 -H 指定http请求头信息 curl创建索引库 curl -XPUT http://<ip>:9200

Vuex的基本概念、项目搭建、入坑点

前言:Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex的四大核心 1.state 驱动应用的数据源2.mutations 基因突变 类如C# 属性get set3.actions 行为4.getters 读取器 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明

Kubernetes核心概念总结(摘选)

1.基础架构 1.1 Master Master节点上面主要由四个模块组成:APIServer.scheduler.controller manager.etcd. APIServer.APIServer负责对外提供RESTful的Kubernetes API服务,它是系统管理指令的统一入口,任何对资源进行增删改查的操作都要交给APIServer处理后再提交给etcd.如架构图中所示,kubectl(Kubernetes提供的客户端工具,该工具内部就是对Kubernetes API的调用)是直接

kubernetes系列教程(五)初识核心概念pod

写在前面 前面的系列文章已介绍kubernetes架构,安装,升级和快速入门,读者通过文章的实操已对kubernetes已有初步的认识和理解,从本章开始逐步介绍kubernetes中的基础概念概念和核心概念,基础概念包括:namespace,labels,annotations,pods,volumes等:核心概念包含kubernetes中各种controller,包含以下几种: 应用副本控制器有:Deployments,ReplicaSets,DaemonSets,StatefulSets: