vuex入门到实战——实现一个todoList待办清单【学习记录】

---

前言

本文将从Vuex的核心概念出发，通过讲解一个待办清单的小项目，帮助大家更好的理解Vuex。此文主要是根据近日学习的关于Vuex的内容，整理出的学习笔记，用来巩固与记录。欢迎大家交流与讨论！😊

主要参考视频为黑马程序员的“Vue全家桶-Vuex” 原视频地址
https://www.bilibili.com/video/BV1h7411N7bg?from=search&seid=5930582975536399924&spm_id_from=333.337.0.0
若有侵权，请邮箱联系1544945335@qq.com 联系，我会及时删除。敬礼！

---

一、Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 +
库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
参考教程：https://vuex.vuejs.org/zh/

那么什么是状态管理模式呢？在一般情况下，我们的vue应用在渲染数据时，是一个单项数据流的过程，驱动的数据源为状态，状态会以声明方式映射到视图，用户通过在视图上操作又会导致状态变化。如图所示：

我们多个视图依赖同一状态（数据）、或不同的视图需要变更同一状态（数据）时，若没有一个统一的状态管理器，但是又需要实现数据共享时，过程就会变得麻烦。按照传统方式，我们是可以通过各个组件传参来达成数据共享，但若项目变大，传参的过程就会变得相当繁琐，且后期维护的成本也很高。
所以Vuex作为一个状态管理器，可以把不同组件的共享状态抽离出来，集中管理便于后期维护，并利用vuex的响应式的特点从而实现高效进行状态更新。

Vuex核心概念

在安装好vuex之后，将出现store文件夹，里面有index.js的文件，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   
  },
  mutations: {
   
  },
  actions: {
   
  },
  modules: {
   
  }
})

下面将一一介绍Store的核心。

1. State

State为Vuex的公共状态，提供唯一的数据源，用来存储公共的数据。

• 例如我们将要实现todoList的列表事项就可以作为公共数据放在state中。

代码如下：

 state: {
   
    // 所有的任务列表
    list: [],
  },

当我们要访问存放在State里面的数据可通过以下两种方式：

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

  this.$stroe.state.全局数据名称
  

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

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

  //2. 通过 mapState 函数，将当前组件需要的全局数据映射为当前组件
  computed: {
       
  ...mapState(['list']),
  },
  

2. Mutations

Mutations用于变更Store中的数据。

• 只能通过mutations变更Store数据，不可以直接操作Store中的数据。

假设要实现一个点击自增的功能，首先需要在Store中定义Mutations代码如下：

 export default new Vuex.Store({
   
  state: {
   
  	count: 0
  },
  mutations: {
   
    //加1
  	add(state){
   
  	  //变更状态
  	  state.count++
  	}
  	//携带参数，加n
  	addN(state，n){
   
  	  //变更状态
  	  state.count += n
  	}
  },
})

触发mutations需通过以下两种方式：

• 触发mutations的第一种方式：

  methods: {
       
    handle() {
       
      this.$store.commit('add')
    }
  }
  //携带参数
  methods: {
       
    handle1() {
       
      this.$store.commit('addN',n)
    }
  }
  

• 触发mutations的第二种方式：

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

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

3.Actions

Actions用于处理异步任务

• 如果通过异步操作变更数据，必须通过Actions，而不能使用Mutations
• 在Actions中还是要通过触发Mutations方式变更数据

假设要实现一个延时添加的功能，在Store中定义actions代码如下：

 export default new Vuex.Store({
   
  state: {
   
  	count: 0
  },
  mutations: {
   
  	add(state){
   
  	  //变更状态
  	  state.count++
  	}
  },
  actions: {
   
  	 addAsync(context) {
   
      //异步动作，如延时添加
      setTimeout(() => {
   
        context.commit(