Vuex的基本使用总结

1.Vuex概述

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

使用Vuex管理数据的好处：

能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

什么样的数据适合存储到 Vuex 中 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

2.vuex的使用

安装 vuex 依赖包npm install vuex --save 导入 vuex 包import vuex from 'vuex' Vue.use(vuex) 创建 store 对象const store = new Vuex.Store({ // state 中存分的就是全局共享的数据 state: { count: 0 } }) 将 store 对象挂载到 vue 实例中new Vue({ el: '#app', render: h => h(app), router, // 将创建的共享数据对象，挂载到 Vue 实例中 // 所有的组件都可以直接从 store 中获取全局的数据 store })

3. Vuex的核心概念

3.1 State

State 提供唯一的公告数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

// 创建 store 数据源，提供唯一公共数据 const store = new Vuex.Store({ state: { count: 0 } })

组件访问 State 中数据的第一种方式：

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

组件访问 State 中数据的第二种方式：mapState

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

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

// 2. 将全局数据，映射为当前组件的计算属性 computed: { ...mapState(['count']) } <template> <div> <h3>当前最新的count值为：{{ count }}</h3> </div> </template>

3.2 Mutation

Mutation 用于变更 Store中 的数据。

只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化,方便后期维护。

触发mutation的第一种方式：this.$store.commit('fnName',[args可选])

// 定义 Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { add(state) { // 变更状态 不要在 mutations 函数中， 执行异步操作 state.count++ } } }) // 触发mutation methods: { handle() { // 触发 mutations 的第一种方式 this.$store.commit('add') } }

可以在触发 mutations 时传递参数：

// 定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { addN(state, step) { // 变更状态 state.count += step } } }) // 触发mutation methods: { handle() { // 在调用 commit 函数， // 触发 mutations 时携带参数 commit的作用就是调用mutations中的某个方法 this.$store.commit('addN', 3) } }

触发 mutations 的第二种方式：mapMutations

// 1. 从 vuex 中按需导入 mapMutations 函数

import { mapMutations } from 'vuex'

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

// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数 methods: { ...mapMutations(['add', 'addN']), handle(){ this.add() } }

注意： 当在mutations中执行异步操作时

// 定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { addN(state) { setTimeout(() => { // 定时器模拟异步操作 state.count++ }, 1000) } } })

在vuex中查看到的状态跟实际操作的数据不一致。此时就用到了 Action

3.3 Action

Action 用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。 触发 actions 的第一种方式:this.$store.dispatch('fnName',[args可选])

// 定义 Action const store = new Vuex.Store({ // ... mutations: { add(state) { state.count++ } }, actions: { addAsync(context) { setTimeout(() => { // 在actions中 不能直接修改state中的数据 //必须通过 context.commit() 触发某个mutaions中的函数 //只有mutations中定义的函数才可以修改 context.commit('add') }, 1000) } } }) // 触发 Action methods: { handle() { // 触发 actions 的第一种方式 this.$store.dispatch('addAsync') } }

触发 actions 异步任务时携带参数：

// 定义 Action const store = new Vuex.Store({ // ... mutations: { addN(state, n) { state.count+= n } }, actions: { addNAsync(context, n) { setTimeout(() => { context.commit('addN', n) }, 1000) } } }) // 触发 Action methods: { handle2() { // 点击一次按钮 +5 this.$store.dispatch('addNAsync', 5) } }

触发 actions 的第二种方式: mapActions

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

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

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

3.4 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据。不会改变原数据。

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。Store 中数据发生变化，Getter 的数据也会跟着变化。 // 定义 Getter const store = new Vuex.Store({ state: { count: 0 }, getters: { showNum: state => { return '当前最新的数量是【'+ state.count +'】' } } })

调用 getter 的第一种方式：this.$store.getters.名称

<h3>{{ $store.getters.showNum }}</h3> // js中获取 //console.log(this.$store.getters.showNum)

调用 getter 的第二种方式：mapGetters

import { mapGetters } from 'vuex' computed: { ...mapGetters(['showNum']), // 直接作为一个计算属性的返回值使用 }