什么是Vuex.docx - 墨天轮文档

什么是Vuex.docx

153

8页

0次

2022-07-15

5墨值下载

什么是 Vuex?

用 2 句话概括：

1. 主要应用于 Vue.js 中管理数据状态的一个库

2. 通过创建一个集中的数据存储，供程序中所有组件访问

当然这么说肯定还是有所不懂，这里我就用单一使用 vue.js 和使用 vuex.js 场景的不同进行对比讲解

单一使用 Vue.js 的场景

在单一使用 vue.js 的场景中，我们难免要在不同的组件中互相传值。在该场景中，由一个根组件，两个父组件再各自拥有一个子组件，

我们如果使用 prop 的属性传值，在这个详情组件需要使用添加组件中的某个值时，我们需要不停的触发某个事件将这个值一层一层

一层一层地沿着这个路径传过去，这样能实现将值传递给详情组件，但这是相当的麻烦（鬼知道我当初不知道 vuex 为了传值头有多

大）。现在让我们看下 vuex.js 场景下的效果

使用 Vuex.js 的场景

我们将使用专门的 store 存储所有的数据，如果我们需要取到组件二或更深一级的子组件的某个数据我们可以直接使用 getter 方法直

接拿到其中的数据。如果我们需要向 store 中添加或更改某个数据，我们可以用 mutation 或直接$store.state 的形式直接跨过父组件

向 store 中直接添加或更改数据。就好比一个仓库，所有人能直接跨过上级拿到仓库中的某个你所需要的东西，这无疑是在我们使用

vue 开发项目时，相当省时省力的办法。

Vuex 的使用场景

 涉及到非父子关系的组件，例如兄弟关系、祖孙关系，甚至更远的关系组件之间的联系

 中大型单页应用，考虑如何更好地在组件外部管理状态

相信大家在看完上面 vuex 的基本介绍后，心里对它使用场景也有了一个大概的想法。

总而言之，在页面数据结构比较复杂，数据和组件分离，分别处理，组件量较大的情况下，那么使用 Vuex 是非常合适的。

Vuex 的安装配置

在使用 vue-cli 脚手架创建项目后

npm install vuex

进入项目安装 vuex,安装完成后，在项目的文件夹 src 中再新建一个文件夹 store,文件夹中新建文件 store.js(命名为本人习惯)。

store.js

//引入 vue 和 Vuex

import Vue from 'vue'

import Vuex from 'vuex'

//引入之后，对 vuex 进行引用

Vue.use(Vuex)

main.js

import {store} from './store/store'

new Vue({

store:store,//使用 store

el: '#app',

of 8

5墨值下载

关注