一、基础了解
1. 原先组件之间共享数据的方式
- 父向子传值:v-bind 属性绑定
- 子向父传值:v-on 事件绑定
- 兄弟组件之间共享数据: EventBus 接收数据的组件用$on自定义一个事件;发送数据的组件通过$emit发送数据
Vuex可以方便的实现组件之间数据的共享。存储在 vuex 中的数据都是响应式的,能够实时保持数据与页面的同步。
只有组件之间共享的数据,才有必要存储到 vuex 中;对于组件中的私有数据,依旧存储在组件自身的 data 中即可。
2. 基本使用
① 安装 vuex 依赖包
npm
② 导入 vuex 包
import
③ 创建 store 对象
const
④ 将 store 对象挂载到 vue 实例中
所有的组件,就可以直接从 store 中获取全局的数据了
new
3. 创建案例初始化
win+R
输入vue ui命令
弹出的可视化网页面,单击Vue project manager
创建,选择存放路径
填写项目名称—package manager:npm—初始化git仓储,初始的提交消息init project
选择手动安装依赖项
babel、VueX、Linter/Formatter、Use config files 选上
下一步。选择ESLint + Standard config。创建
打开里面的store.js文件
import
打开里面的main.js文件
import
App.vue清空后重新初始化
<
创建两个组件,一个加法、一个减法。两个组件使用同一个数据
component文件夹清空,新建Addition.vue、
<
Subtraction.vue
<
App.vue中导入以上两个组件、注册为App的子组件、使用组件
<
保存后 不想要分号,也不想要双引号要单引号
根目录下新建 .prettierrc
{
git操作
git
二、核心概念
1. state
提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储
store.js文件
export
1.1 第一种使用
- this.$store.state.全局数据名称
Addition.vue文件
因为在<template>中,可以省略this
<
1.2 第二种使用
Subtraction.vue文件
<
2. Mutation
用于更改 Store中 的数据
- 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
- 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
2.1 触发mutation的第一种方法
① 普通使用
store.js文件
state
Addition.vue文件
methods
② 传参
store.js文件
mutations
Addition.vue文件
methods
2.2 触发mutation的第二种方法
store.js文件
mutations
Subtraction.vue文件
<
Mutation中不能写定时器之类的异步函数
3. Action
Action 用于处理异步任务。
如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
3.1 触发action第一种方式
① 一秒后加1
store.js文件
mutations
Addition.vue文件
<
② 携带参数 一秒后加5
store.js文件
mutations
Addition.vue文件
<
3.2 触发action第二种方式
store.js文件
state
Subtraction.vue文件
<
4. Getter
- 对 Store 中的数据处理之后形成新的数据,不会改变 Store 中的数据
- Store 中数据发生变化,Getter 的数据也会跟着变化
store.js文件
state
4.1 第一种使用方式
Addition.vue文件
<
4.2 第二种使用方式
Subtraction.vue文件
<