Vuex入门到实战教程

目录

1、Vuex概述

1.1、Vuex是什么

1.2、使用Vuex统一管理状态的好处

1.3、什么样的数据适合存储在Vuex中

2、Vuex的基本使用

2.1、安装vuex依赖包

2.2、导入vuex包

2.3、创建store对象

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

3、Vuex的核心概念

3.1、State

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

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

3.2、Mutation

3.2.1、触发mutations的第一种方式：

3.2.2、调用mutations的第二种方式：

3.3、Action

3.3.1、触发actions的第一种方式

3.3.1、触发actions的第二种方式

3.4、Getter

3.4.1、组建中调用getters的第一种方式：

3.4.2、组建中调用getters的第二种方式：

---

1、Vuex概述

1.1、Vuex是什么

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

1.2、使用Vuex统一管理状态的好处

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

1.3、什么样的数据适合存储在Vuex中

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

2、Vuex的基本使用

2.1、安装vuex依赖包

npm install vuex --save

2.2、导入vuex包

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

2.3、创建store对象

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

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

new Vue({
  el: '#app',
  render: h => h(app),
  router,
  // 将创建的共享数据对象，挂载到 Vue 实例中
  // 所有的组件，就可以直接从store中获取全局的数据了
  store
})

3、Vuex的核心概念

vuex中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

3.1、State

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

// 实例代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 提供唯一公共数据
  state: {
    count: 0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

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

通过：this.$store.state.全局数据名称，访问state中的属性

<!-- 实例代码 -->
<template>
  <div>
    <h3>当前最新的count的值为：{{ this.$store.state.count }}</h3>
    <button>+1</button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>

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

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

<!-- 实例代码 -->
<template>
    <div>
      <h3>当前最新的count的值为：{{count}}</h3>
      <button>-1</button>
    </div>
  </template>
<script>
// 1、在组件中，从vuex中按需导入mapSate函数
import { mapState } from 'vuex'
export default {
  // 2、将全局数据，映射为当前组件的计算数据
  computed: {
    ...mapState(['count'])
  },
  data () {
    return {}
  }
}
</script>

3.2、Mutation

Mutation 用于变更Store中的数据。

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

mutations: {
    add(state) {
      // 变更状态
      state.count++
    }
  }

3.2.1、触发mutations的第一种方式：

在组件中的，通过this.$store.commit('函数名')，调用mutations中的函数

methods: {
    handlerAdd() {
      this.$store.commit('add')
    }
}

触发mutations时，传递参数的方式

state: {
    count: 0
  },
  mutations: {
    // 传递参数
    addN (state, step) {
      state.count += step
    }
  }

在组件中调用，并传递参数

methods: {
    handlerAddN() {
      this.$store.commit('addN', 3)
    }
  }

3.2.2、调用mutations的第二种方式：

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

// 1、在组件中，从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
...
// 2、映射为当前组件的methods方法
methods: {
    ...mapMutations(['add', 'addN'])
}

通过定义事件，调用mutations中的函数

methods: {
    ...mapMutations(['add', 'addN']),
    handlerAdd () {
      // 直接调用
      this.add()
    },
    handlerAddN () {
      // 调用，并传递参数
      this.addN(3)
    }
}

注意：不要在muations函数中，执行异步操作！如果需要执行异步操作，请在Action中执行 ！

3.3、Action

Action 用于处理异步任务。

如果需要通过异步操作变更数据，必须通过Action，而不能使用Mutations。

但是Action中不能直接修改state中的数据，还是要通过触发mutation的方式，间接变更state中的数据。

3.3.1、触发actions的第一种方式

• 触发actions异步任务时，不携带参数

在actions中，定义一个不携带参数的函数

actions: {
    addAsync (context) {
      setTimeout (() => {
        // 在action中，不能直接修改state中的数据
        // 必须通过 context.commit()，触发某个mutations中的函数
        context.commit('add')
      }, 1000)
    }
}

在组件中，通过this.$store.dispatch('函数名')，调用actions中的函数

methods: {
    handlerAddAsync () {
      // 这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch('addAsync')
    }
}

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

在actions中，定义一个携带参数的函数

actions: {
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
}

在组件中，通过this.$store.dispatch('函数名', 自定义参数)，调用actions中的函数

methods: {
    handlerAddNAsync () {
      this.$store.dispatch('addNAsync', 3)
    }
}

3.3.1、触发actions的第二种方式

1、在组件中，从vuex中按需导入mapActions函数

import { mapActions } from 'vuex'

2、将指定的actions函数，映射为当前组件的methods函数

• 不携带参数的方式

methods: {
    ...mapActions(['addAsync']),
    // 在自定义事件函数中，调用actions中的函数
    handlerAddAsync() {
        this.addAsync()
    }
}

• 携带参数的方式

methods: {
    ...mapActions(['addNAsync']),
    // 在自定义事件函数中，调用actions中的函数
    handlerAddNAsync() {
        this.addNAsync(3)
    }
}

3.4、Getter

Getter 用于对Store中的数据进行加工处理形成新的数据。不会修改源数据，只是包装数据。

• Getter可以对Store中已有的数据，加工处理后形成新的数据，类似Vue的计算属性。
• Store中的数据发生变化，Getter的数据也会跟着变化。

在getters对象内，自定义一个函数

state: {
    count: 0
},
getters: {
    showNum: state => {
      return `当前最新的数量是【${state.count}】`
    }
}

3.4.1、组建中调用getters的第一种方式：

this.$store.getters.名称

methods: {
    handlerGetter () {
      console.log(this.$store.getters.showNum)
    }
}

3.4.2、组建中调用getters的第二种方式：

1、在组件中，从vuex中按需导入mapGetters函数

import { mapGetters } from 'vuex'

2、通过导入的mapGetters函数，映射为当前组件的computed计算属性

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