Vuex学习笔记

2021-04-09 本文已影响0人幽小鬼

用了好久vuex没有记录过，重新再学一遍并做一下笔记。

1 Vuex概述

1.1 组件之间共享数据的方式

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

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

1.2 Vuex是什么

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

1.3 使用Vuex的好处

能够在vuex中集中管理共享的数据，方便开发和维护
能够高效实现组件之间数据共享，提高开发效率
存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.4 什么样的数据适合存储到Vuex中

一般情况向下，只有组件间共享的内容才存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中

2 Vuex的基本使用

2.1 安装vuex依赖包

npm install vuex --save

2.2 导入vuex包

import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)

2.3 创建store对象

//创建VueX对象
const store = new Vuex.Store({
    state: {
        //存放的键值对就是所要管理的状态
        name: 'helloVueX'
    }
})

2.4 将store对象挂载到vue实例中

在根目录底下的main.js的文件中：

import store from './store'
new Vue({
  el: '#app',
  // 将创建的数据共享对象挂载到这个vue实例中
  store,
  render: h => h(App)
})

3 Vuex核心概念

3.1 State

State提供唯一的公共数据源，所有共享的数据源都要统一放到Store的State中进行存储。
组件访问State中数据方式：

方式一

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

方式二

// 从vuex中按需导入mapState
import { mapState } from 'vuex'

通过导入的mapState函数，将当前函数需要的全局数据，映射为当前组件的computed计算属性：

computed: {
  ...mapState(['name'])
}

然后在当前组件就可以直接使用this.name

3.2 Mutation

Mutation用于变更Store中的数据。

只能通过Mutation变更Store中的数据，不可以直接操作Store中的数据。
操作虽然繁琐，但是可以集中监控所有数据的变化。
Mutations中不能执行异步操作。

mutations使用方法

mutations方法都有默认的形参：
([state] [,payload])

state是当前vuex对象中的state
payload是该方法在被调用时传递参数使用的

定义Mutation：

const store = new Vuex.Store({
    state: {
        name: 'helloVueX'
    },
    mutations: {
        edit (state, name) {
            // 变更状态
            state.name = name
        }
    }
})

方法一

在组件中使用commit函数调用这个mutation：

this.$store.commit('edit', '111')

方法二

// 从vuex中按需导入mapMutitions
import { mapMutations } from 'vuex'

通过导入的mapMutations函数，将需要的mutations函数映射为当前组件的methods方法：

methods: {
  ...mapMutations(['edit'])
}

然后在当前组件可以直接调用方法this.edit('111')

3.3 Action

Action用于处理异步任务。
如果通过异步操作变更数据，必须使用Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

actions使用方法

Actions中的方法有两个默认参数：
([context] [,payload])

context 上下文对象
payload 挂载参数

比如执行setTimeout异步操作：

actions:{
    aEdit(context, payload) {
        setTimeout(() => {
            // 只有mutations中定义的函数才有权利修改state中的数据
            context.commit('edit', payload)
        }, 1000)
    }
}

方法一

在组件中调用异步方法，使用dispatch函数来触发action：

this.$store.dispatch('aEdit', '111')

方法二

// 从vuex中按需导入mapActions
import { mapActions } from 'vuex'

通过导入的mapActions函数，将需要的actions函数映射为当前组件的methods方法：

methods: {
  ...mapActions(['aEdit'])
}

然后在当前组件可以直接调用方法this.aEdit('111')

3.4 Getter

Getter用于对Store中的数据进行加工处理形成新的数据。

Getter可以对Store中已有的数据进行加工处理之后形成新的数据，类似Vue的计算属性。
Store中的数据发生变化，Getter中的数据也会发生变化。
Getter中的数据处理不会修改State中的数据，只起到包装的作用。

Getters使用方法

Getters中的方法有两个默认参数

state 当前vuex对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用
定义Getter：

getters:{
    name1(state) {
        return state.name
    },
    name2(state, getters) {
        return getters.name1 + state.name
    }  
}

方法一

this.$store.getters.名称

方法二

// 从vuex中按需导入mapGetters
import { mapGetters } from 'vuex'

通过导入的mapGetters函数，将当前函数需要的全局数据，映射为当前组件的computed计算属性：

computed: {
  ...mapGetters(['name1'])
}