章
目
录
本文主要讲解关于vuex 的介绍以及使用详解相关内容，让我们来一起学习下吧！
VueX的基本介绍
当您构建大型的Vue.js应用程序时，状态管理变得至关重要。Vuex是Vue.js官方提供的状态管理库，它允许您在应用程序中集中管理状态，并提供了一种可预测的状态管理方案。以下是一些关于Vuex的相关信息：
- 核心概念：Vuex包括几个核心概念，如state（状态）、getters（获取器）、mutations（变化）和actions（动作）。这些概念共同组成了Vuex的状态管理机制，使得状态的变化变得可预测和可控。
- 单一数据源：在Vuex中，应用的状态被存储在单一的数据源中，这使得状态的变化变得更加可追踪和管理。通过严格的状态管理，可以避免在应用程序中出现难以追踪的bug。
- 数据流：Vuex遵循严格的数据流规则，所有的状态变化都需要通过特定的方式来触发和处理。这种数据流的规范性使得应用程序的状态变化更加可控，也更容易调试和维护。
- 插件和工具：Vuex提供了丰富的插件和开发工具，帮助开发者更好地管理和调试应用程序的状态。例如，Vue DevTools可以帮助您实时追踪和调试Vuex状态的变化。
- 适用场景：Vuex特别适用于大型的、复杂的Vue.js应用程序，对于简单的应用程序可能会显得过于繁琐。在需要管理大量状态和实现复杂数据流的场景下，Vuex能够发挥其强大的作用。
关系图
可以将关系图里面的 （Vue components） 当作去饭店吃饭的客人，（Actions） 比作饭店的服务员，（Mutations） 比作饭店的后厨 （State） 比作菜品 ， 当作一个正常的常规流程
VueX 的核心概念
State（状态）
State即应用程序中需要管理的状态，可以理解为存储数据的地方。在Vuex中，所有的状态都被存储在单一的数据源中，即store。这样做的好处是可以方便地跟踪状态的变化，以及在需要时进行调试和监控。
Getters（获取器） Getters可以理解为store的计算属性，它们的作用是从state中派生出一些状态，类似于Vue组件中的计算属性。通过getters，我们可以对state进行一些复杂的计算或筛选，然后在组件中使用这些派生出的状态。
Mutations（变化）
Mutations是唯一允许修改state的地方。每个mutation都有一个字符串类型的事件类型（type）和一个回调函数，回调函数接受state作为第一个参数。在mutation中，我们可以对state进行同步的修改操作。
Actions（动作）
Actions类似于mutations，不同之处在于actions可以包含异步操作。通过actions，我们可以提交mutation来间接地对state进行修改。这样做的好处是可以将一些异步操作放在actions中，使得我们的代码更加清晰和易于维护。
Modules（模块）
当应用变得非常复杂时，单一的store可能会变得难以维护。Vuex允许我们将store分割成模块（module），每个模块拥有自己的state、getters、mutations和actions。这样做的好处是可以更好地组织代码，使得应用的状态管理更加清晰和可维护。
VueX 的基本使用
用法
安装Vuex
首先，您需要通过npm或yarn安装Vuex：
npm install vuex
# 或
yarn add vuex
1. 在 src 下创建 store 目录, 并添加 index.js 文件
// 从vuex 中引入 createStore
import { createStore } from "vuex";
// 创建一个新的 store 实例
const store = createStore({
// state 是一个方法，存放状态的地方
state() {
// return的就是当前的状态
return {
num: 0,
};
},
// 同步修改state
mutations: {
/**
* 接收的第一个参数是当前的state
* 第二个参数是传过来的参数
*/
add(state, name) {
console.log(name);
state.num++;
},
},
actions: {
/**
* 第一个参数是context 也就是当前上下文
* 比如可以直接获取state、使用 commit 调用等
*
* 第二个参数是页面传过来的参数
*/
asyncAdd(context, name) {
console.log(name);
/**
* 使用 commit 调用 mutations 里面的方法改变数据
* 第一个参数是方法名
* 第二个是要传的参数
*/
context.commit("add", name);
},
},
});
export default store;
2. 在入口文件引入, 并通过 use 挂载
import { createApp } from "vue";
import router from "./router";
import vuex from "./store";
createApp(LearnRouter)
// 使用use 方法 把我们路由挂载到vue上
.use(router)
// 使用 use 把vuex挂载到实例上
.use(vuex)
.mount("#app");
通过以上的步骤，您就可以在Vue应用程序中使用Vuex来管理状态了。当您需要在组件中使用state、getters、mutations或actions时，可以通过this.$store来访问store中的内容。
3.在页面使用
<template>
<h2>App组件</h2>
<h1>通过 $store.state.数据 的方式</h2>
<h2>{{ $store.state.num }}</h2>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
}
}
}
</script>
通过 辅助函数 使变量方便使用
在需要使用变量的页面从vuex导入mapState
import { mapState } from 'vuex'
//在computed 里 使用
componted: {
...mspState(['数据1','数据2','数据3'])
}
修改数据
在 引入 vuex 的文件内 书写
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
num: 10086,
num2: 10010,
num3: 176125,
}
},
// 当前选项内存储 vuex 内唯一的 修改 state 内数据的方法
mutations: {
addNum(state, data) {
// 第一个形参： 就是当前的state 选项
// 第二个形参： 外界调用 addNum 的时候，传递的值
state.num++
}
}
})
export default store
在使用方法的文件内调用
<template>
<h2>App组件</h2>
<h1>通过 $store.state.数据 的方式</h2>
<h2>{{ $store.state.num }}</h2>
<h1>通过 辅助函数 的方式</h2>
<h2>{{ num }}</h2>
<button @click="NumAdd">点击修改 num 的值</button>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
}
},
methods: {
NumAdd() {
// 拿到 方法，当触发 NumAdd 时， 触发 传递过来的 addNum 方法
this.$store.commit('addNum')
}
},
computed: {
...mapState(['num','num2','num3'])
}
}
</script>
actions 选项
// 当前选项类似于 mutations 中的方法
// 内部 主要存储对于异步方法的处理
// 调用 mutations 中， 修改 state 的数据
actions: {
asyncAddNum(context, data) {
// 当前的两个参数
// context: 上下文，可以利用第一个形参获取 state 中的数据 或者
调用 mutations 中的方法
// data: 外界调用当前方法传递的参数
setTimeout(() => {
context.commit('addNum')
},1000)
}
}
//在要用到该方法的文件中
import { mapActions } from 'vuex'
// methods 里 解构
...mapActions(['asyncAddNum'])
// 在触发 事件时 直接调用
Num3Add() {
this.asyncAddNum()
}
getter 选项
// 在 引入 vuex 的地方 创建 getters 选项
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
num: 10086,
num2: 10010,
num3: 176125,
name: '张三'
}
},
getters: {
getterName (state) {
return state.name
}
}
})
export default store
<template>
<h1>App组件</h2>
<!-- 通过 $store.getters.属性名 获取 -->
<h2>{{ $store.getters.getterName }}</h2>
<!-- 通过 mapGetters 解构 进来数据 -->
<h2> {{ getterName }} </h2>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getterName'])
}
}
</script>
modules 选项
新建一个文件分割数据 stu.js
export default {
state() {
return {
name: '李四',
age: '18'
}
}
}
在 store的 index.js 文件内 引入 stu.js 并且注册 stu
import { createStore } from 'vuex'
import stu from './stu'
const store = createStore({
state() {
return {
num: 10086,
num2: 10010,
num3: 176125,
name: '张三'
}
},
modules: {
stu
}
})
export default store
在使用界面直接用 $store.state.stu.属性名
<template>
<h1>App组件</h2>
<h2>{{ $store.state.stu.name }}</h2>
<h2>{{ $store.state.stu.age }}</h2>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['getterName'])
}
}
</script>
总的来说，Vuex为大型的、复杂的Vue.js应用程序提供了一种强大的状态管理方案，通过严格的数据流规则和一些核心概念，使得状态管理变得更加可控和可预测。希望以上的讲解能够帮助您更好地理解和使用Vuex。
以上就是关于vuex 的介绍以及使用详解相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！
