VueX 学习笔记

VueX 学习笔记

正在学习，未完待续（2021-01-27）

一、简介

1.1、什么是Vuex

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

导入vuex之前必须先导入vue

1.2 我的理解

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

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

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")

在组件中执行vuex中getters中的函数

// 执行 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