vuex的工作原理与基础使用(小白理解笔记-全)

6.1. vuex是什么

vuex是 专门在Vue中实现集中式状态(数据)管理的一个Vue插件. (对数据在一个地方统一管理 插件使用Vue.use(vuex)注册 )

对vue应用中 多个组件的共享状态 进行集中式的管理( 读/写 ),也是一种组件间通信的方式,且适用于任意组件间通信.

vuex官方文档 : https://github.com/vuejs/vuex

利用全局事件总线 来实现 多组件共享数据

利用vuex实现 多组件共享数据 ( 把组件之间共享的数据 单独放在vuex中 )

6.2. 什么时候使用vuex

1. 多个组件依赖于同一状态(数据)
2. 来自不同的组件的行为 需要 变更同一状态(数据).

(也就是说 多个组件 都可以读取同一个共享数据 并且更改这个共享数据)

6.3. 不使用vuex和使用vuex的对比

6.3.1. 不使用vuex 实现求和案例-- 数据存储在组件自己内部

APP组件里 只有一个Count组件该组件控制的数据sum 放在自己组件里面.

6.3.2. vuex工作原理图

vuex有三个重要的组成部分 : Actions（行为）、 Mutations （修改 变异）、State（状态or数据）。

第一步 :

组件内部如count组件内 调用diapatch函数 参数有两个 ①动作类型'jia' ② 数值 2

动作类型与数值--> 给到Actions-->Action对象里有 动作'jia'对应的函数.

第二步:

在Action对象里'jia'对应的函数内部 调用commit('jia',2) -->给到Mutations-->Mutations对象里有jia函数 内部有 state数据和传进来的2 所以直接在该函数内部 书写语句 state.sum += 2; --->state里的sum值被+2 -->并将数据重新渲染到组件中.

Actions看似多余 , 实际上如果 需要发送ajax请求 才能知道处理的数值是多少,那么该ajax请求就在action里面发起.
如果不需要异步请求,则可以省略Dispatch这个步骤,即直接在组件里调用commit函数.
Devtools是vuex官方出的开发者工具 它和Mutations对话 因为Mutations才是真正修改加工state数据的人.

store仓库来管理 Actions（行为）、 Mutations （修改加工维护）、State（状态or数据）三个对象.

6.3.3. 搭建vuex环境

npm i vuex@3

import Vuex from 'vuex';
Vue.use(Vuex);

在vue中安装后 就可以在new Vue的配置项里使用store (vue就可以识别这个配置项了)--打印该vue实例可以看到对应的$store属性. 并且组件实例身上也有 $store属性了.

配置项store对应的 值

import store from './store' //引入src下的store文件夹的index.js
new Vue({
  el:'#app',
  render: h => h(APP),
  store,//store: store, 对象属性的简写形式
})

store文件下的index.js文件

注意 main.js中 import store from './store' 语句执行时, store文件内的代码会全部执行. 而该文件内使用了 Vuex插件Vuex.Store 所以在该行语句执行前 需要先在vue中安装好vuex插件即 Vue.use(Vuex).

但是 脚手架在执行代码时 会将所有import语句提升到文件最上方 并按顺序执行.

所以 在mian.js中 引入的 store/index.js文件 会先于 Vue.use(Vuex)执行.所以直接将 Vue.use(Vuex)语句放到 store/index.js文件内部 确保在使用Vuex.Store的时候 已经在vue中安装了Vuex插件.

store/index.js文件

mian.js文件中 直接引入store 并将其在vue实例中进行配置.

6.3.4. 利用vuex实现求和案例

① 将想要共享的数据sum 放在store/index.js 的 state对象内

② 在想要触发方法的地方 使用组件实例身上的$store 即 this.$store.dispatch('jia',this.n) 'jia' 是想要调用的actions对象中的函数名 this.n是自己组件count内部使用的数据.

③ 在action对象中添加对应函数 函数会接收两个参数 context(上下文) 和value (值)

const actions = {
  jia( context,value ){
    console.log ( context ,value ); 
    // action函数内部 调用commit.使用mutation对象里的函数(函数名大写)
    context.commit ('JIA' ,value );
  }
}

constext是上下文对象,包含了一些vue认为在该步骤可能会用到的函数以及数据,

value 用来接收 dispatch函数调用时传过来的value值

④在mutations对象中添加对应的对象 函数会接收两个参数 state(数据) value(值)

const mutations = {
  JIA ( state,value ){
    console.log ( state ,value ); 
    // action函数内部 调用commit.使用mutation对象里的函数(函数名大写)
    state.sum += value ;
  }
}

⑤ 计算完成 如何展示数据sum?

<template>
  {{ $store.state.sum}}
</template>

6.3.5. Vuex中的getter配置项

使用场景 : 如果需要对state中数据 进行复杂的计算 再使用的话,可以在组件内部使用之前学过的 计算属性computed 但是这个值即dahe 只能在当前组件中重复使用,不能在不同组件间共享.

Vuex中的getter配置项中的函数 既可以对state的值进行负责计算return结果 也可以在组件间共享.

不同组件中 均可以使用 getter配置项中的值

6.3.6. mapState 与 mapGetters

1.mapState解决的问题 : 想要使用state中的数据 每次都需要重复写 $store.state

只在自己的组件中使用 所以使用计算属性, 但是写起来也不方便 需要写多个函数.

如果有一个加工器, 我给他一个 sum 它就可以自动生成 $store.state.sum 就好了! 这个加工器 也就是一个帮我们生成代码的函数. 因此 vuex 帮我们提供了mapState方法 ,可以生成对应的多个函数 并把它放在一个对象里面. 我们可以在组件里的 具体代码如下

同理 想要使用store中的 getters配置项中的数据 同样可以使用mapGetters方法来 生成对应的计算属性,具体代码如下

6.3.7. mapActions 和 mapMutations方法.

解决的问题: 如果想要使用 store仓库中的actions对象中方法或者mutations对象中的方法.

需要重复写 this.$store.commit()或this.$store.dispatch()

解决方法,在组件中 引入mapActions方法或mapMutations方法 并在组件的methods配置项中使用,如下:

本篇文章内容 整理自前端禹神的相关课程.