2021-11-19 vue笔记-vuex(一) vuex的安装和使用,vuex核心概念:State,Mutation,Action,Getter

0.回顾:组件之间共享数据的方式

父子传值

父向子传值： v-bind 属性绑定
子向父传值：v-on 事件绑定

非父子传值

• EventBus

$on 接收数据的组件
$emit 发送数据的组件

• $ref
• 作用域插槽
• 注入inject(在插件中使用)
• 路由传参

1.vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。

定义

实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

优点

1.能够在 vuex 中集中管理共享的数据，易于开发和后期维护。
2.能够高效的实现组件之间的数据共享，提高开发效率。
3.存储在vuex 中的数据都是响应式的，能够实时保持数据和页面的同步。

组件中需要共享的数据适合存在vuex

使用场合

• 多个视图使用一个状态

传参的方法对于多层嵌套的组件将会很麻烦，
当你使用的vuex这个状态会在你项目的任何地方都可以使用这个状态

• 不同视图需要变同一状态

采用父子组件直接或者通过事件来变更和同步状态的多份拷贝，
通常会导致无法维护代码

2.vuex安装和使用

安装命令

npm install vuex --save

使用步骤

• 导入 vuex 包

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

• 创建 store 对象

const store = new Vuex.Store({
    state: {
    //state存放全局共享数据count: 0},mutations: {
    },actions: {
    }
})

• 把 store 对象挂载到 vue 实例中

new Vue({
    el: '#app',render: h => h(app), router,   store// 将创建的共享数据对象，挂载到 Vue 实例中
})

此时所有的组件可直接从store对象中获取全局数据

3.vuex核心概念:State,Mutation,Action,Getter

3.1.State(唯一的公共数据源):共享数据的存储位置

组件访问State中数据的方法

• 方法一

this.$store.state.全局数据名称

• 方法二
  step1:从 vuex 中按需导入 mapState 函数
  step2: 将当前组件需要的全局数据，映射为当前组件的 computed 属性

// 1. 从 vuex 中按需导入 mapState 函数
import {
     mapState } from 'vuex'

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
    ... mapState(['count'])
}

mapState的实际应用示例:
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡

3.2.Mutation:用于变更 Store 中的数据

触发Mutation的方法

• 方法一

this.$store.commit() 

• 方法二
  step1:从 vuex 中按需导入 mapMutations 函数
  step1:将需要的 mutations 函数，映射为当前组件的 methods 方法

// 1. 从 vuex 中按需导入 mapMutations 函数
import {
     mapMutations } from 'vuex'

// 2. 将需要的 mutations 函数，映射为当前组件的 methods 方法
methods: {
    ... mapMutations(['add', 'addN'])}

使用步骤(不传参)

• 定义Mutation

const store = new Vuex.Store({
    state: {
    count: 0},mutations: {
    add(state) {
    // 变更状态state.count++}}
})

• 触发Mutation

methods: {
    handle1(){
    // 触发 mutations 的第一种方式this.$store.commit('add')}
}

传参

• 定义 Mutation

const store = new Vuex.Store({
    state: {
    count: 0},mutation: {
    addN(state, step) {
    // 变更状态state.count += step}}
})

• 触发 mutation

methods: {
    handle2(){
    // 调用 commit 函数// 触发 mutations 时携带参数this.$store.commit('addN', 3)}
}

3.3.Action:用于处理异步任务

Action和Mutation

通过异步操作变更数据必须通过 Action，
在 Action 中要通过触发Mutation的方式间接变更数据

触发Action的方法(与Mutation相同)

• 方法一

this.$store.dispatch()

• 方法二
  step1:从 vuex 中按需导入 mapActions 函数
  step1:将需要的 actions 函数，映射为当前组件的 methods 方法

// 1. 从 vuex 中按需导入 mapActions 函数
import {
     mapActions } from 'vuex'

// 2. 将需要的 actions 函数，映射为当前组件的 methods 函数
methods: {
    ... mapActions(['addASync', 'addNASync'])
}

使用步骤(不传参)

• 定义Action

const store = new Vuex.Store({
    state: {
    count: 0},mutations: {
    add(state) {
    state.count++}},actions: {
    addAsync(context) {
    //异步:1s后执行addsetTimeout(() => {
    context.commit('add')}, 1000)}}
})

• 触发Action

methods: {
    handle() {
    // 触发 actions 的第一种方法this.$store.dispatch('addAsync')}
}

传参

• 定义Action

const store = new Vuex.Store({
    state: {
    count: 0},mutations: {
    addN(state, step) {
    state.count += step}},actions: {
    addNAsync(context, step) {
    setTimeout(() => {
    context.commit('addN', step)}, 1000)}}
})

• 触发Action

methods: {
    handle() {
    this.$store.dispatch('addNAsync', 5)}
}

3.4.Getter:把Store中数据处理形成新数据

• Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 中的计算属性。
• Store 中数据发生变化，Getter 的数据也会跟着变化。

使用Getter的方法(与Action和Mutation一样)

• 方法一

this.$store.getters.名称

• 方法二
  step1:从 vuex 中按需导入 mapGetters 函数
  step1:将需要的 mapGetters函数，映射为当前组件的 methods 方法

import {
     mapGetters } from 'vuex'computed: {
    ...mapGetters(['showNum'])
}

示例

// 定义 Getter
const store = new Vuex.Store({
    state: {
    count: 0},getters: {
    showNum: state => {
    return '当前最新的数量为[' + state.count + ']'}}
})