Vue基础知识-（二十）Vuex快速入门

本文最后更新于：May 13, 2023 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

Vuex3官方文档

Vuex4官方文档

📢注意

  • Vue2的请使用Vuex3。
  • Vue3的请使用Vuex4。

原理简述

官方图。

理解图（自己画的）。

正常情况：在组件中调用dispatch将数据传到actions中指定的方法，然后在方法中再次调用commit使用mutations中的方法修改数据。此方法可以在actions的方法中发送axios请求。即可以动态获取数据参数。

中间那条线表示：在组件中也可以直接调用commit从而使用mutations中的方法。简单明确的事可以用此方法。

小总结

  • state：用来存储数据的。
  • actions：用来处理业务逻辑和获取参数数据，发送axios请求等。
  • mutations：获取参数并最终修改数据。就不用在此中处理业务逻辑和发送axios请求了。

一句话：state用来存储数据；actions用来业务逻辑的处理；mutations修改数据。这样就分工明确。

store.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { createStore } from 'vuex'

export default createStore({
  //存储数据
  state: {
  },
  //操作数据
  mutations: {
  },
  //事件动作
  actions: {
  },
  modules: {
  }
})

使用步骤：

    1. 在组件中调用 this.$store.dispatch('方法名'，参数) ，其中方法名是store.ts的actions中的方法名称，参数为自定义传过去的参数。
    1. 在store.ts的actions中写上面用到的方法内容，并使用commit将其传到mutations中的方法进行最后的数据修改。
    1. 在mutations中进行数据的修改。

快速使用

这里以一个点击按钮实现加法的例子。

初始化store.tx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createStore } from 'vuex'

export default createStore({
  //存储数据
  state: {
    cntS: 0 //先定义一个数据
  },
  //操作数据
  mutations: {
  },
  //事件动作，可用于发送axios请求
  actions: {
  },
  modules: {
  }
})

组件

点击按钮触发事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
    <div>
      <button @click="addT">加加加</button>
    </div>
    {{$store.state.cntS}}  <!--使用store中的数据-->
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      cn:2 //需要加多少
    }
  },
  methods:{
    addT(){ //按钮触发事件
      this.$store.dispatch('jia',this.cn) //调用dispatch。这里的 jia方法 必须是在store.ts的actions中有的方法名称
    }
  }
}
</script>

<style scoped>
</style>

给store.ts中的actions添加jia方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { createStore } from 'vuex'

export default createStore({
  //存储数据
  state: {
    cntS: 0
  },
  //操作数据
  mutations: {
    JIA(state,value){ //state就是存储数据的state，value为传过来的值
      state.cntS+=value //修改数据
    }
  },
  //事件动作，可以使用axios发送请求从而获取动态数据
  actions: {
    jia(context,value){ //context为一个上下文封装对象，里面有commit等。是一个小store。value为传过来的参数值
      context.commit('JIA',value) //大写的方法名称 JIA 必须是在mutations中存在的方法。
    }
  },
  modules: {
  }
})

当点击按钮触发事件后，界面上的数据就会发生改变。

组件直接调用commit

在组件中直接调用commit使用mutations中的方法进行数据的修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
    <div>
      <button @click="addT">加加加</button>
    </div>
    {{$store.state.cntS}}
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      cn:2
    }
  },
  methods:{
    addT(){
      this.$store.commit('JIA',this.cn) //直接调用commit使用mutations中的方法，实现效果一样
    }
  }
}
</script>

<style scoped>
</style>

这样实现的效果和上面的一样。