vuex mapstate_Vuex

一、基础了解

1. 原先组件之间共享数据的方式

1. 父向子传值：v-bind 属性绑定
2. 子向父传值：v-on 事件绑定
3. 兄弟组件之间共享数据： 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中 的数据

1. 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

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

1. 对 Store 中的数据处理之后形成新的数据，不会改变 Store 中的数据
2. Store 中数据发生变化，Getter 的数据也会跟着变化

store.js文件

state

4.1 第一种使用方式

Addition.vue文件

<

4.2 第二种使用方式

Subtraction.vue文件

<