VueX 学习笔记

VueX 学习笔记

正在学习,未完待续(2021-01-27)

一、简介

1.1、什么是Vuex

vuexvue配套的公共数据管理工具,我们可以将共享的数据保存在vuex中,方便整个程序中的任何组件都可以获取和修改vuex中保存的数据。官方介绍

导入vuex之前必须先导入vue

1.2 我的理解

我理解的不一定科学,但是目前我感觉还可以解释的通

  • state
    • 理解:可以类比理解为 vue模板中的 data,就是定义变量的地方
  • getters
    • 理解:可以类比理解为 vue模板中的computed,就是定义计算属性的地方
  • mutations
    • 理解:可以类比理解为 vue模板中的methods,就是定义方法的地方
    • 注意:这里必须是同步函数(我的理解是因为后边actions要调用)
  • actions
    • 理解:就是调用mutations中的函数,可以理解为mutations是工具,actions是使用工具的
    • 注意:这里可以是异步函数
    • 疑问:这里涉及到一个context的概念,上下文,我的理解是调用背景,应该和下边的命名空间有关系
  • modules
    • 理解:就是把一个复杂的vuexstore对象,按自己理解的分类方式,拆成几个包
    • 注意:这里有涉及到命名空间,我感觉应该就是一个作用域的概念,肯定是不严谨,但是我还没太理解

1.3、简单使用VueX

创建vuex对象

先导入VUE

import Vue from 'vue'

再导入Vuex

import Vuex from 'vuex'

挂载vuex到vue根节点,以便在项目中可以访问到vuex

Vue.use(Vuex)

可以理解为定义变量(state),定义函数,使用变量,执行函数
在这里插入图片描述

const store = new Vuex.Store({
  //这里的state就相当于组件中的data,是专门用来保存共享数据的
  state: {
    count: 0,
	msg:'hello'
  },
// 用来保存(定义)修改数据方法的,可以类比理解为组件中的methods
// 在执行这些方法时,系统会自动给这些方法传递一个state参数
  mutations: {
    increment (state) {
      state.count++
    }
  },
//actions可以类比理解为函数调用,调用mutations中定义的函数
  actions:{
	increment(ctx){
	ctx.commit('increment')
	}
 }
// 可以类比computed
    getters:{
    sayHello(state){
		return state.msg + "word"
    }
  }
})

在父组件中添加了store的key保存的vuex对象,那么父组件和所有子组件都可以使用vuex中保存的共享数据

在使用vuex中保存的共享数据的时候,必须通过如下格式

组件中获取vuex中的变量的数据

// 获取vuex中的数据
this.$store.state.msg // hello 
this.$store.state.count // 0

组件中修改vuex中变量的数据(在vuex中不推荐这种方式直接修改数据

// 直接修改
this.$store.state.count = this.$store.state.count + 1 // 1

组件中执行vuex中定义的方法(一般是在vuex内部这么用)

// 执行上边的mutations中的increment
// 可以理解为调用函数
this.$store.commit("increment")

组件中执行vuexgetters中的函数

// 执行 sayHello
this.$store.getters.sayHello // hello word

组件中执行actions中的方法,调用mutations

this.$store.dispatch('increment')

二、vuex中的核心概念

Vuex官网中,会出现这么一些概念

在这里插入图片描述
大概就是这样,右侧的是辅助函数,作用类似与map函数

2.1 getters

2.2 mutations

2.3 actions

2.4 modules

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页