五分钟了解Vuex实用知识(总结)

时间：2021-08-21 来源：互联网编辑：宝哥软件园浏览：次

这段时间我们一直用vue写项目，项目中会根据葫芦画来使用vuex，但总有一种朦胧的感觉。所以我决定彻底了解它。

看了一下午的官方文件资料，才发现vuex这么容易！

作为一个圈子里的人，我决定输出文档。如果你仔细阅读这篇文章，确保你精通vuex。

我把我的代码上传到github，每个人如果需要都可以把它拉下来：github

我来说说vuex是什么？

Vuex是专门为vue.js应用开发的状态管理模式。

这种状态可以理解为数据中的一种属性，需要与其他组件共享。

也就是说，它是我们需要共享的数据，通过使用vuex以统一集中的方式进行管理。

在vuex中，默认情况下有五个基本对象：

State:存储状态(变量)getters:数据采集前的重新编译可以理解为state的计算属性。我们使用$ sotre。吸气剂。fun()组件中的变体：修改状态，它是同步的。在程序集中使用$ store.submit('，params)。这类似于我们组件中的自定义事件。操作：异步操作。$ store的子模块。dispath(')模块：store用在开发大型项目和促进状态管理的组件中。这里就不解释了。同上。让我们一步一步正式开始使用vuex

1.首先创建一个vue-cli项目

执行以下命令创建一个应用程序项目(这里也可以使用其他非webpack模板和非应用程序名称)

vue init网络包应用程序

2.创建完成后，我们进入文件夹并运行项目

Cd app/npm运行dev接下来，我们将在src目录中创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录如下所示

3.目前，我们还没有推出vuex。我们需要先下载vuex并介绍它

在保证我们在项目中的情况下，在命令行中输入以下命令来安装vuex

npm安装vuex-save

4.安装成功后，我们就可以在store.js享受我们的vuex了！

在store.js文件中，介绍Vuex并使用Vuex。请注意，我的变量名是大写的vue和vuex

从' vue '导入Vue从' vuex '导入Vuex . Vue . use(Vuex)const state={ count : 0 }导出默认的新Vuex。商店({ state })

接下来，介绍main.js中的store

从“vue”导入Vue，从“App”导入。/App“从导入路由器”。/路由器“从导入存储”。/vuex/store '/introduction store vue . config . production tip=false/* eslit-disable no-new */new vue({ El : ' # app '、路由器、商店、组件： {app}、模板3360' app/'})，但我们可以在任何组件中使用我们的定义。

这里我们在helloWorld中使用它来移除helloworld.vue中未使用的标签

template div class=' hello ' H3 { { $ store . state . count } }/H3/div/template打开我们刚刚运行的项目的浏览器，可以看到已经成功使用了！

在vue开发工具中，我们可以看到我们定义的变量计数。

到这一步，已经成功了一小部分！vuex简单吗？

回想一下，我们只需要在下载和安装中使用vuex，在我们定义的store.js中定义状态对象，并公开它。

在main.js中使用我们的store.js(这里是为了防止在各种组件中引用，因为在main.js中有我们新的Vue实例！)

现在我们已经在vuex中使用了state，接下来如何操作这个值？没错！使用变体和动作

我们继续操作store.js文件

我们在sotre.js中定义了突变对象，这个对象中有两种方法。突变中的第一个参数默认为状态，下一个是用户定义的参数。

我们在突变中定义了增加和减少两种方法，并设置了一个参数n，默认值为0，然后在Vuex中使用。商店

/** *突变里面放置的是我们操作状态对象属性的方法*/const突变={ mutationaddcount(state，n=0) { return (state.count=n) }，mutationreduccount(state，n=0) { return (state.count -=n) } }导出默认的新Vuex .存储({状态，突变})然后我们在helloWorld.vue中，使用这个方法

还记得我们如何在组件中使用突变吗？就和自定义事件非常相似

模板div class=' hello ' H3 { { $ store。国家。count } }/H3 div按钮@ click=' handleAddClick(10)'增加/button button @ click=' handle reduce click(10)'减少/button/div/div/template方法： { handleAddClick(n){ this .$商店。commit(' mutationaddcount '，n)；}，handleReduceClick(n){ this .$商店。commit(' mutationeducaccount '，n)；} } 来浏览器看一下效果如何！

我们可以看到每当触发事件时，我们都可以在某视频剪辑软件开发工具中看到我们触发的突变方法，以及参数

完美！

接下来就是行动，行动是异步操作

创建行动对象，并且使用

这里我在两个方法中使用了两个不同的参数，一个是背景，它是一个和商店对象具有相同对象属性的参数。在第二个函数中，我是直接使用了这个对象的犯罪的方法。

凭大家喜好就行

const actions={ actionsAddCount(上下文，n=0){ console。日志(上下文)返回上下文。commit(' mutationaddcount '，n) }，actions reduccount({ commit }，n=0){ return commit(' mutationeducaccount，n) } }导出默认的新Vuex .存储({状态、突变、动作})在helloWorld.vue中

在方法中，增加两个方法，使用dispath来触发

差异异步操作/div按钮@click='handleActionsAdd(10)'异步增加/button button @ click=' handleactions reduce(10)'异步减少/button/div handleActionsAdd(n){ this .$商店。调度(' actionsAddCount '，n) }，handleActionsReduce(n){ this .$商店。调度(' actions reduccount '，n) }进入浏览器看下效果如何！

最后就是吸气剂

我们一般使用吸气剂来获取我们的国家，因为它算是状态的一个计算属性

const getter s={ getter计数(state，n=0) { return (state.count=n) } }导出默认的新Vuex .存储({ state，突变，动作，getter })H4 { { count } }/H4 const getter={ getter count(state){ return(state。计数=10)} }个吸气剂算是非常简单的了。

到这里，如果全都看懂了，vuex你已经没有压力了。

但是状态管理官方给了我们一个更简单的方式来使用vuex，也就是{映射状态、映射突变、映射动作、映射获取器}

只要我们把上面基础的搞懂，这些都不在话下，只是方面我们书写罢了。

就这么简单，这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书，我是看完了，受益匪浅！

脚本从vuex '导入{映射状态，映射获取器，映射动作，映射获取器}导出默认{ name: 'HelloWorld '，data(){ return { msg : }欢迎使用您的Vue.js App' } }，methods: <.映射突变({ handleAddClick: '突变添加计数，handleReduceClick: '突变减少计数' }),mapActions({ handleactionsadd : ' actionsadd count '，handleactions reduce : ' actions reduccount ' })//handleAddClick(n){//this .$商店。commit(' mutationaddcount '，n)；//}，//handleReduceClick(n){ //this .$商店。commit(' mutationeducaccount '，n)；//}，//handleActionsAdd(n){ //this .$商店。dispatch(' actionsAddCount '，n) //}，//handleactions reduce(n){//this .$商店。dispatch(' actions reduce count '，n) //} }，计算出： { count(){返回此.$商店。getter s . getter count } } }/脚本同理吸气剂和状态也可以使用映射状态，映射获取器

如果你更懒的话，我们可以使用数组，而非对象，或者es6里面的对象简写方式

就像这种