Vuex学习笔记

发表于 | 分类于

用了好久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依赖包

1
npm install vuex --save

2.2 导入vuex包

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

2.3 创建store对象

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

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

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

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

3 Vuex核心概念

3.1 State

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

方式一

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

方式二

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

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

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

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

3.2 Mutation

Mutation用于变更Store中的数据。

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

    mutations使用方法

    mutations方法都有默认的形参：
    ([state] [,payload])
  • state是当前vuex对象中的state
  • payload是该方法在被调用时传递参数使用的

定义Mutation：

1
2
3
4
5
6
7
8
9
10
11
const store = new Vuex.Store({
    state: {
        name: 'helloVueX'
    },
    mutations: {
        edit (state, name) {
            // 变更状态
            state.name = name
        }
    }
})

方法一

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

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

方法二

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

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

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

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

3.3 Action

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

actions使用方法

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

  • context 上下文对象
  • payload 挂载参数

比如执行setTimeout异步操作：

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

方法一

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

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

方法二

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

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

1
2
3
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：
    1
    2
    3
    4
    5
    6
    7
    8
    getters:{
        name1(state) {
            return state.name
        },
        name2(state, getters) {
            return getters.name1 + state.name
        }  
    }

方法一

1
this.$store.getters.名称

方法二

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

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

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