一遍文章搞懂Vuex不是梦---Vuex详解

文章目录

一、Vuex概述

1.1 官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

  • 它采用集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
    -Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试功能。
在这里插入图片描述

1.2 大白话

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。

其实，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。

然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。

如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。

不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

1.3 组件间共享数据的方式

  • 父向子传值：v-bind属性绑定
  • 子向父传值：v-on事件绑定
  • 兄弟组件之间共享数据：EventBus
    • $on 接收数据的组件
    • $emit 发送数据的组件

上述只适合小范围内数据共享，如果是复杂应用的话，就不再合适了。

1.4 再看Vuex是什么

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

如图：

在不使用Vuex进行状态管理时，如果要从最下面的紫色组件传递数据的话，还是比较繁琐，也不便于维护。

在使用Vuex进行状态管理时，只需要一个共享Store组件，紫色组件将数据写入Store中，其他使用的组件直接从Store中读取即可。

在这里插入图片描述

1.5 使用Vuex统一管理好处

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

二、状态管理

2.1 单页面状态管理

我们知道，要在单个组件中进行状态管理是一件非常简单的事情，如图

在这里插入图片描述
  • State：指的就是我们的状态，可以暂时理解为组件中data中的属性
  • View：视图层，可以针对State的变化， 显示不同的信息
  • Actions：这里的Actions主要是用户的各种操作，如点击、输入等，会导致状态发生变化

简单加减法案例，代码如下：

<template>
  <div>
    <div>当前计数为：{{counter}}</div>
    <button @click="counter+=1">+1</button>
    <button @click="counter-=1">11</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      counter: 0
    };
  }
};
</script>
  • 在这个案例中，有没有状态需要管理呢？肯定是有的，就是个数counter
  • counter需要某种方式被记录下来，也就是上述中的的State部分
  • counter的值需要被显示在洁面皂，这个就是上述中的View部分
  • 界面发生某些操作(比如此时的+1、-1)，需要去更新状态，这就是上述中的Actions部分

这就是一个最基本的单页面状态管理。

2.2 多页面状态管理

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢，比如

  • 多个视图View都依赖同一个状态（一个状态改了，多个界面需要进行更新）
  • 不同界面的Actions都想修改同一个状态

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图，但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的，那怎么办呢？

  • 状态1/状态2/状态3你放在自己的组件中，自己管理自己用，没问题
  • 但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理

没错，Vuex就是为我们提供这个大管家的工具。

2.3 全局单例模式

我们现在要做的就是将共享的状态抽出来，交给我们的大管家，统一进行管理，每个视图按照规定，进行访问和修改操作。

这就是Vuex的基本思想

2.4 管理哪些状态

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。

  • 比如用户的登录状态、用户名称、头像、地理位置信息等
  • 比如商品的收藏、购物车中的物品等

这些状态信息，我们都可以放在统一放在Vuex中，对它进行保存和管理，而且它们还是响应式的。

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

三、Vuex的基本使用

3.1 安装

npm install vuex --save

3.2 导入

import Vuex from 'vuex'

Vue.use(Vuex)

3.3 创建store对象

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

3.4 挂载store对象

将创建的共享数据对象store挂载到Vue实例中，所有的组件，就可以直接从store中获取全局的数据了

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

四、Vuex的核心概念

4.1 State

4.1.1 概念

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

如果状态信息是保存到多个Store对象中的，那么之后的管理和维护等都会变得特别困难，所以Vuex也使用了单一状态树(单一数据源Single Source of Truth)来管理应用层级的全部状态。

单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

export default new Vuex.Store({
  state: {
    count: 0
  },
}

4.1.2 State数据访问方式一

通过this.$store.state.全局数据名称访问，eg.

<h3>当前最新Count值为：{{this.$store.state.count}}</h3>

4.1.3 State数据访问方式二

从vuex中按需导入mapState函数

import { mapState } from 'vuex'

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

<template>
  <div>
    <h3>当前最新Count值为：{{ count }}</h3>
    <button>-1</button>
  </div>
</template>

<script>

import { mapState } from "vuex";

export default {
  computed: {
    ...mapState(["count"])
  }
};
</script>

4.2 Mutation

4.2.1 引入

如果想修改count的值，要怎么做呢？

也许聪明的你，已经想到，直接在组件中对this.$store.state.count进行操作即可，代码如下：

<template>
  <div>
    <h3>当前最新Count值为：{{this.$store.state.count}}</h3>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  methods: {
    add() {
      this.$store.state.count++;
    }
  }
};
</script>

测试发现，这可以实现需求，完成+1操作。

但是，这种方法在vuex中是严格禁止的，那要怎么做呢？这时，就需要使用Mutation了。

4.2.2 概念

Mutation用于变更存储在Store中的数据。

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

4.2.3 定义Mutation函数

在mutations中定义函数，如下：

  mutations: {
    // 自增
    add(state) {
      state.count++
    }
  }

定义的函数会有一个默认参数state，这个就是存储在Store中的state对象。

4.2.4 调用Mutation函数

Mutation中不可以执行异步操作，如需异步，请在Action中处理

4.2.4.1 方式一

在组件中，通过this.$store.commit(方法名)完成触发，如下：

export default {
  methods: {
    add() {
      //   this.$store.state.count++;
      this.$store.commit("add");
    }
  }
};
4.2.4.2 方式二

在组件中导入mapMutations函数

import { mapMutations } from 'vuex'

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

methods:{
    ...mapMutations('add','addN'),
    // 当前组件设置的click方法
    addCount(){
        this.add()
    }
}

4.3 Mutation传递参数

在通过mutation更新数据的时候，有时候需携带一些额外的参数，此处，参数被成为mutation的载荷Payload。

如果仅有一个参数时，那payload对应的就是这个参数值，eg.

在这里插入图片描述

如果是多参数的话，那就会以对象的形式传递，此时的payload是一个对象，可以从对象中取出相关的数据。

在mutations中定义函数时，同样可以接收参数，示例如下：

mutations: {
    // 自增
    add(state) {
      state.count++
    },
    // 带参数
    addNum(state, payload) {
      state.count += payload.number
    }
  }

在组件中，调用如下：

methods: {
  add() {
    //   this.$store.state.count++;
    this.$store.commit("add");
  },
  addNum() {
    this.$store.commit("addNum", {
      number: 10
    });
  }
}

4.4 Mutation响应规则

Vuex的store中的State是响应式的，当State中的数据发生改变时，Vue组件也会自动更新。

这就要求我们必须遵守一些Vuex对应的规则：

  • 提前在store中初始化好所需的属性
  • 当给State中的对象添加新属性时，使用如下方式：
    • 使用Vue.set(obj,'newProp','propValue')
    • 用新对象给旧对象重新赋值

示例代码：

    updateUserInfo(state) {
      // 方式一
      Vue.set('user', 'address', '北京市')
      // 方式二
      state.user = {
        ...state.user,
        'address': '上海市'
      }
    }

4.5 Mutation常量类型

4.5.1 引入

思考一个问题：

在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)，当项目越来越大时，Vuex管理的状态越来越多，需要更新状态的情况也越来越多，也就意味着Mutation中的方法越来越多。

当方法过多，使用者需要花费大量时间精力去记住这些方法，甚至多个文件间来回切换，查看方法名称，也存在拷贝或拼写错误的情况。

那么该如何避免呢？

  • 在各种Flux实现中，一种很常见的方案就是使用常量替代Mutation事件的类型
  • 可以将这些常量放在一个单独的文件中，方便管理，整个App所有的事件类型一目了然
4.5.2 解决方案

解决方案：

  • 创建mutation-types.js文件，在其中定义常量
  • 定义常量时, 可以使用ES2015中的风格, 使用一个常量来作为函数的名称
  • 使用处引入文件即可

新建mutation-types.js：

在这里插入图片描述

在store/index.js中引入并使用：

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation-type'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    user: {
      name: '旺财',
      age: 12
    }
  },
  mutations: {
    // 自增
    [types.ADD_NUM](state) {
      state.count++
    },
}

在组件中，引入并调用：

<script>
import { ADD_NUM } from "../store/mutation-type";
export default {
  methods: {
    add() {
      this.$store.commit(ADD_NUM);
      //   this.addAsync();
      //   this.$store.state.count++;
      //   this.$store.commit("add");
    }
  }
};
</script>

4.3 Action

Action类似于Mutation，但是是用于处理异步任务的，比如网络请求等

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

4.3.1 参数context

在actions中定义的方法，都会有默认值context。

  • context是和store对象具有相同方法和属性的对象
  • 可以通过context进行commit相关操作，可以获取context.state数据

但他们并不是同一个对象，在Modules中会介绍到区别。

4.3.2 使用方式一

在index.js中，添加actions及对应的方法：

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

组件中调用：

<script>
export default {
  methods: {
    addNumSync(){
        // dispatch用于触发Actions中的方法
        this.$store.dispatch('addAsync')
    }
  }
};
</script>

4.3.3 使用方式二

在组件中，导入mapActions函数

import { mapActions } from 'vuex'

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

<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["addAsync"]),
    add() {Î
        this.addAsync()
    },
}

4.3.4 使用方式三

在导入mapActions后，可以直接将指定方法绑定在@click事件上。

...mapActions(["addAsync"]),
---------------------------
 <button @click="addAsync">+1(异步)</button>

该方式也适用于导入的mapMutations

4.3.5 Actions携带参数

在index.js的actions中，增加携带参数方法，如下：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // 带参数
    addNum(state, payload) {
      state.count += payload.number
    }
  },
  actions: {
    addAsyncParams(context, payload) {
      setTimeout(() => {
        context.commit('addNum', payload)
      }, 1000);
    }
  }
})

在组件中，调用如下：

methods: {
    addNumSyncParams() {
      this.$store.dispatch("addAsyncParams", {
        number: 100
      });
    }
  }

4.3.6 Actions与Promise结合

Promise经常用于异步操作，在Action中，可以将异步操作放在Promise中，并且在成功或失败后，调用对应的resolve或reject。

示例：

在store/index.js中，为actions添加异步方法：

actions: {
    loadUserInfo(context){
      return new Promise((resolve)=>{
        setTimeout(() => {
          context.commit('add')
          resolve()
        }, 2000);
      })
    }
  }

在组件中调用，如下：

methods: {
    addPromise() {
      this.$store.dispatch("loadUserInfo").then(res => {
        console.log("done");
      });
    }
}

4.4 Getter

  • Getters用于对Store中的数据进行加工处理形成新的数据，类似于Vue中的计算属性
  • Store中数据发生变化，Getters的数据也会跟随变化

4.4.1 使用方式一

在index.js中定义getters

getters:{
    showNum(state){
      return '当前Count值为:'+state.count
    }
  }

在组件中使用：

<h3>{{ this.$store.getters.showNum }}</h3>

4.4.2 使用方式二

在组件中，导入mapGetters函数

import { mapGetters } from 'vuex'

通过刚才导入的mapGetters函数，将需要的getters函数映射为当前组件的computed方法：

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

使用时，直接调用即可：

<h3>{{ showNum }}</h3>

4.5 Modules

4.5.1 概念

Module是模块的意思，为什么会在Vuex中使用模块呢？

  • Vues使用单一状态树，意味着很多状态都会交给Vuex来管理
  • 当应用变的非常复杂时，Store对象就可能变的相当臃肿
  • 为解决这个问题，Vuex允许我们将store分割成模块(Module)，并且每个模块拥有自己的State、Mutation、Actions、Getters等

4.5.2 使用

在store目录下，新建文件夹modules，用于存放各个模块的modules文件，此处以moduleA为例。

在modules文件夹中，新建moduleA.js，内部各属性state、mutations等都和之前一致，注释详见代码，示例如下：

export default {
    state: {
        name: '凤凰于飞'
    },
    actions: {
        aUpdateName(context) {
            setTimeout(() => {
                context.commit('updateName', '旺财')
            }, 1000);
        }
    },
    mutations: {
        updateName(state, payload) {
            state.name = payload
        }
    },
    getters: {
        fullName(state) {
            return state.name + '王昭君'
        },
        fullName2(state, getters) {
            // 通过getters调用本组方法
            return getters.fullName + ' 礼拜'
        },
        fullName3(state, getters, rootState) {
            // state代表当前module数据状态，rootState代表根节点数据状态
            return getters.fullName2 + rootState.counter
        }
    }
}
  • 局部状态通过context.state暴露出来，根节点状态则为context.rootState

在store/index.js中引用moduleA，如下：

import Vue from "vue"
import Vuex from "vuex"

import moduleA from './modules/moduleA'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        a: moduleA
    }
})

export default store

这样就通过分模块完成了对状态管理的模块化拆分。

4.6 优化

如果项目非常复杂，除了分模块划分外，还可以将主模块的actions、mutations、getters等分别独立出去，拆分成单独的js文件，分别通过export导出，然后再index.js中导入使用。

示例：
分别将主模块的actions、mutations、getters独立成js文件并导出，以actions.js为例，

export default{
    aUpdateInfo(context, payload) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                context.commit('updateInfo')
                resolve()
            }, 1000);
        })
    }
}

在store/index.js中，引入并使用，如下：

import Vue from "vue"
import Vuex from "vuex"
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import moduleA from './modules/moduleA'

Vue.use(Vuex)

const state = {
    counter: 1000,
    students: [
        { id: 1, name: '旺财', age: 12 },
        { id: 2, name: '小强', age: 31 },
        { id: 3, name: '大明', age: 45 },
        { id: 4, name: '狗蛋', age: 78 }
    ],
    info: {
        name: 'keko'
    }
}

const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions,
    modules: {
        a: moduleA
    }
})

export default store

最终项目目录图:


在这里插入图片描述

这样子，结构清晰明了，也便于后期的维护。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,529评论 5赞 475
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,015评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,409评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,385评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,387评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,466评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,880评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,528评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,727评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,302评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,873评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2赞 342

推荐阅读更多精彩内容

  • Vuex使用详解
    一、简介 先来看看Vuex比较专业的介绍： Vuex是一种状态管理模式，它能够集中式存储管理所有组件的状态，并用相...
    西瓜鱼仔阅读 478评论 0赞 3
  • 前端面试问题集合
    0 HTML5相关 websocket WebSocket 使用ws或wss协议，Websocket是一个持久化的...
    可爱多小姐阅读 851评论 0赞 0
  • 6--Vuex
    Vuex(状态管理模式) Vuex 的核心由五部分组成：State、Getter、Mutation、Action ...
    Daeeman阅读 185评论 0赞 4
  • Vuex
    关于VueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理工具大型项目使用为解决组件之间传递数据 之...
    笨灬蛋_a210阅读 159评论 0赞 0
  • 你说
    夜莺2517阅读 127,708评论 1赞 9