Vuex入门教程(详细篇)

目录

1.Vuex是什么2.Vuex的使用3.Vuex的核心概念3.1 State3.1.1创建数据3.1.2访问数据的第一种方式3.1.3访问数据的第二种方式3.1.4组件代码与效果图 3.2 Mutation3.2.1定义Mutation3.2.2 触发Mutation的第一种方式3.2.3定义Mutation(带参数)3.2.3 触发Mutation的第二种方式3.2.4 组件代码与效果图 3.3 Action3.3.1定义Action3.3.2 触发Action的第一种方式3.3.3 定义Action(带参数)3.3.4 触发Action的第二种方式3.3.4 组件代码与效果图 3.4 Getter3.4.1 定义 Getter3.4.2 使用Getter使用 getters 的第一种方式使用 getters 的第二种方式 3.3.4 组件代码与效果图

1.Vuex是什么

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。 当我们的应用遇到多个组件共享状态（数据）时，就可以用到Vuex了。

2.Vuex的使用

安装完VueX后，在项目的src目录下新建store文件夹，然后在store目录下新建index.js。（使用最新的Vue-CLI 4.x.x安装Vuex会自动配置好以下步骤）

在store/index.js中 导入 Vuex 包并创建 Store 对象

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, getters:{ } })

在main.js中将 store 对象挂载到 vue 实例中

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

3.Vuex的核心概念

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

StateMutationGetterAction

在上面的index.js中我们也可以看到一个Store对象就包含了这几个对象

3.1 State

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

3.1.1创建数据

export default new Vuex.Store({ state: { num: 0 } })

然后我们在组件中访问 state 中数据的有两种方式：

3.1.2访问数据的第一种方式

this.$store.state.全局数据名称 //访问刚刚创建的num就是 this.$store.state.num

3.1.3访问数据的第二种方式

// 1. 从 vuex 中按需导入 mapState 函数 import { mapState } from 'vuex' //..... // 2. 将全局数据，映射为当前组件的计算属性 computed: { ...mapState(['num']) }

3.1.4组件代码与效果图

<template> <div id="app"> <h1>num : {{this.$store.state.num}}</h1><!-- this.$store.state.全局数据名称 --> <h1>num : {{num}}</h1> </div> </template> <script> import { mapState } from "vuex"; //从 vuex 中按需导入 mapState 函数 export default { name: "App", //将全局数据，映射为当前组件的计算属性 computed: { ...mapState(["num"]) } }; </script>

3.2 Mutation

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

3.2.1定义Mutation

export default new Vuex.Store({ state: { num:0 }, mutations: { numAddOne(state){ //num自增1 state.num++; } } })

和访问state数据一样，我们在触发mutations也有两种方式

3.2.2 触发Mutation的第一种方式

methods:{ addOne(){ this.$store.commit('numAddOne') //触发 mutations 的第一种方式 } }

3.2.3定义Mutation(带参数)

mutations: { //n为参数 numAddN(state,n){ //num自增n state.num+=n; } },

3.2.3 触发Mutation的第二种方式

import {mapMutations } from "vuex";//从 vuex 中按需导入 mapMutations 函数 //... methods:{ ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 }

3.2.4 组件代码与效果图

<template> <div id="app"> <h1>num : {{this.$store.state.num}}</h1> <!-- this.$store.state.全局数据名称 --> <button @click="addOne">+ 1</button> <h1>num : {{num}}</h1> <button @click="numAddN(3)">+ n</button> </div> </template> <script> import { mapState ,mapMutations } from "vuex";//从 vuex 中按需导入 mapMutations 函数 export default { name: "App", components: {}, computed: { ...mapState(["num"]) }, data() { return {}; }, methods:{ ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 addOne(){ this.$store.commit('numAddOne') } } }; </script>

3.3 Action

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

3.3.1定义Action

export default new Vuex.Store({ state: { num: 0 }, mutations: { numAddOne(state) { //num自增1 state.num++; } }, actions: { numAddOneAsync(context) { setTimeout(() => { context.commit('numAddOne') }, 1000) } } })

3.3.2 触发Action的第一种方式

methods:{ addOneAsync(){ this.$store.dispatch('numAddOneAsync')//触发 Action } }

3.3.3 定义Action(带参数)

export default new Vuex.Store({ state: { num: 0 }, mutations: { numAddN(state, n) { //num自增n state.num += n; } }, actions: { //n为参数 numAddNAsync(context,n) { setTimeout(() => { context.commit('numAddN',n) }, 1000) } } })

3.3.4 触发Action的第二种方式

//从 vuex 中按需导入 mapActions 函数 import { mapActions } from 'vuex' //..... //将指定的 actions 函数，映射为当前组件的 methods 函数 methods: { ...mapActions(['numAddNAsync']) }

3.3.4 组件代码与效果图

<template> <div id="app"> <h1>num : {{this.$store.state.num}}</h1> <!-- this.$store.state.全局数据名称 --> <button @click="addOne">+ 1</button> <br> <button @click="addOneAsync">+ 1 Async</button> <h1>num : {{num}}</h1> <button @click="numAddN(3)">+ n</button> <br> <button @click="numAddNAsync(3)">+ n Async</button> </div> </template> <script> import { mapState ,mapMutations ,mapActions } from "vuex";//从 vuex 中按需导入 mapXXXX 函数 export default { name: "App", components: {}, computed: { ...mapState(["num"]) }, data() { return {}; }, methods:{ ...mapActions(['numAddNAsync']) ,//将指定的 actions 函数，映射为当前组件的 methods 函数 ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 addOne(){ this.$store.commit('numAddOne') //触发Mutation }, addOneAsync(){ this.$store.dispatch('numAddOneAsync')//触发 Action } } }; </script>

3.4 Getter

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

3.4.1 定义 Getter

export default new Vuex.Store({ state: { num: 0 }, getters: { //定义Getter NumText(state ){ return '当前的num值为: '+ state.num } } })

3.4.2 使用Getter

使用 getters 的第一种方式

this.$store.getters.名称 //这里就是 this.$store.getters.NumText

使用 getters 的第二种方式

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

3.3.4 组件代码与效果图

<template> <div id="app"> <h1>{{this.$store.getters.NumText}}</h1> <!-- this.$store.getters.名称 --> <button @click="addOne">+ 1</button> <br> <button @click="addOneAsync">+ 1 Async</button> <h1>{{NumText}}</h1> <button @click="numAddN(3)">+ n</button> <br> <button @click="numAddNAsync(3)">+ n Async</button> </div> </template> <script> import { mapState ,mapMutations ,mapActions,mapGetters } from "vuex";//从 vuex 中按需导入 mapXXXX 函数 export default { name: "App", components: {}, computed: { ...mapState(["num"]), ...mapGetters(['NumText']) }, data() { return {}; }, methods:{ ...mapActions(['numAddNAsync']) ,//将指定的 actions 函数，映射为当前组件的 methods 函数 ...mapMutations(['numAddN']),// 将指定的 mutations 函数，映射为当前组件的 methods 函数 addOne(){ this.$store.commit('numAddOne') //触发Mutation }, addOneAsync(){ this.$store.dispatch('numAddOneAsync')//触发 Action } } }; </script>

---

目前正在学习前端,微信小程序…欢迎关注，一起学习！！！