Vuex 总结

Vuex 概述

Vuex 用来管理全局数据，方便实现组件间的数据共享，数据集中管理有以下三点好处：

1. 易于后期开发和维护
2. 高效实现数据共享，提高开发效率
3. 能够实现数据实时同步

注意：只有需要共享的数据才有必要存入 Vuex 中

Vuex 的基本使用

1. 安装Vuex依赖包

npm install vuex --save

2. 导入Vuex

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

3. 创建 store 对象

const store = new Vuex.Store({
    // state 中存放的就是要共享的数据
    state: {
        count: 0
    }
})

4. 将 store 实例挂载到 Vue 实例中

new Vue({
    el: '#app',
    render: h => h(app),
    router,
    store
})

Vuex 的核心概念

state

state 是唯一公共数据源，存放所有的公共数据，有两种访问方法

1. this.$store.state.数据名

2. 将全局数据，映射为当前组件的计算数属性

   1. 从 Vuex 中导入 mapState 函数

   2. 将全局数据映射为当前组件的计算属性

import { mapState } from 'vuex'

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

mutation

mutation 用于修改 store 中的数据， Vuex 中不推荐组件中直接通过 methods 修改 store 中的数据，需要借助 mutation 来实现，此操作虽然繁琐，但可以集中监控数据变化：

1. 定义 mutation

mutations: {
  // 定义时间处理函数，变更数据
  // 第一个参数是state，第二个参数是自定义参数
  add(state, n) {
    state.count += n
  }
}

2. 触发 mutation 有两种方式：

// 第一种方式：利用 commit 提交
methods: {
  doAdd() {
    // 第一个参数是函数名，第二个参数是自定义参数
    this.$store.commit('add', 3)
  }
}

// 第二种方式：将 mutations 方法映射为当前组件的 methods 方法
import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['add', 'sub'])
}

注意：mutation 函数中不能执行异步操作

action

专门处理 Vuex 中的异步操作，但还是要通过 mutation 来操作数据

1. 定义 action

action: {
  // 第一个参数是 store 实例
  addAsync(content, n) {
    setTimeOut(function () {
      content.commit('add', n)
    }, 1000)
  }
}

2. 触发 action 有两种方式：

// 第一种方式：利用 dispatch
methods: {
  add() {
    this.$store,dispatch('addAsync', 3)
  }
}

// 第二种方式：将 actions 方法映射为当前组件的 methods 方法
import { mapActions } from 'vuex'
methods: {
  ...mapActions(['addAsync'])
}

getter

对 store 中的数据进行加工处理，形成新的数据（不会修改原数据），当 store 中的数据发生变化，getter 的数据也会发生变化，类似于计算属性 computed。

1. 定义 getter

getter: {
  showNum(state) {
    return '当前最新数量是【' + state.count + '】'
  }
}

2. 访问 getter，有两种方式

   1. this.$store.getters.名称

   2. 将全局数据映射为当前组件的计算属性

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