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后执行add
            setTimeout(() => {
                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 + ']'
        }
    }
})