Vue组件间通信 Vuex的用法解析
上回说到Vue组件间通讯，最后留了一个彩蛋~~~Vuex。Vuex是另一种组件通讯的方法，这节来说说Vuex(store仓库)。
首先Vuex需要安装，安装的方式有很多，在这里就不一一细说了。我是通过npm方式安装的：
npm install vuex --save
安装好之后需要再main.js里全局引入：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)new Vue({el:'#app',store,components: { App },template: '<App/>'})
这样就完成了Vuex的安装。接下来就是Vuex的用法了：
Vuex有五个属性：State、Getter、Mutation、Action、Module。
1. State里放入的是仓库的数据，类似于js里的data：
import Vue from 'vue'
const modules = {
state:{
name: '小白'
}
namespaced: true
}
export default modules
把Vuex放入src下的store文件里，建一个新的组件modules，然后把他抛出来，被引入所需数据的组件：
<script>
import { mapState }from 'vuex'
export default {
computed:{
// name(){
// return this.$store.state.name
// }
...mapState(['name'])
},
mounted(){
console.log(this.name)
}
}
</script>
Vuex里的数据需要从计算属性(computed)里获取，我写了两种我常用的方法，都可以接收到数据，在mounted钩子里打印出的数据：
这里只是举个例子教大家如何用，不建议大家向我这样去写，Vuex应该用于所有业务逻辑的数据。不涉及到业务逻辑的，建议大家用上一章的方法：Vue组件间通信。
2. Getters里放入State里数据的扩展数据，可以把它当作计算属性。比如State里有一个数组，就可以从Getters里获取到数组的长度，或是取到对象里面的属性，用法和计算属性类似：
import Vue from ‘vue'
const modules = {
state:{
list:[
{id :1,content: '第一条'},
{id :2,content: '第二条'}
]
}，
getter:{
listLength: (state)=>{return state.list.length}
}, namespaced: true}export default modules;
我在state里存了一个数组，然后getters计算出state里数组的长度，接下来就是在组件里接收了：
<script>
import { mapGetters } from 'Vuex'
export default {
compoted:{
...mapGetters(['listLength'])
},
mounted(){
console.log(this.listLegth)
}
}
</script>
打开控制台打印出2，就是list数组的长度。
3. Mutations是保存在仓库的方法，这个方法只能用来改变state里面的数据，而且想要改变state里的数据只能用mutations里的方法，并且它里面的方法只能是同步的：
import Vue from 'vue'
const modules = {
state:{
name: '小黑'
},
mutations:{
changeName(state){
state.name = '小白'
}
},
namespaced: true
}
export default modules;
还是那个例子，下面是组件调用方法：
<html>
<div>
{{ name }}
<el-button @click="changeName">改变名字</el-button>
</div>
</html>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
compoted:{
...mapState(['name'])
},
methods:{
...mapMutations(['changeName'])
}
}
</script>
页面渲染后为：
点击按钮之后为：
组件里的按钮通过调用Vuex里的mutation方法将Vuex里的state数据改变，只不过mutations方法只能同步的，涉及到接口的就不能在它里面写，怎么办的？往下看：
4. Actions和mutations一样都是Vuex里的方法，只不过他们有两个最大的不同：
(1) Actions里可以存放异步方法，而Mutations只能放同步的；
(2) Actions里不可以更改state里的数据，state里的数据只能在Mutations里更改。
Actions是什么方法？简单的说，它就是一个Promise方法，通过不同的状态执行不同的方法，执行方法可以是Actions里的方法，也可以是Mutations里的方法。
Actions我就不举例子了，因为大部分都用于axios请求接口，简单跟大家说说这个东西怎么使用：
import Vue from 'vue'
import request from '@/api/axios'
const modules = {
state:{
list:[]
},
actions:{
getList({ commit }){
// 调用接口方法
request.getList()
.then((response)=>{
// commit用来分配mutations方法
commit('getList',response)
})
}
}，
mutations：{
getList(state,response){
state.list = response.data
}
}
}
简单利用actions异步方法分配给mutations方法，然后在mutations方法里给state里的数据赋值，取到接口数据。
commit用于分配mutations方法，dispatch用于分配actions方法，都需要传参进去。
组件调用其实和调用mutations方法类似：
<script>
import { mapState,mapActions } from 'vuex'
export default {
computed:{
...mapState(['list'])
},
mounted(){
this.getList()
},
methods:{
...mapActions(['getList'])
}
}
</script>
这样就基本完成了vuex传值。
5. module可以把vuex分为不同的模块，使业务逻辑变得更清晰，更准确。在上面的代码里，有const modules，给它不同的名字就是分为不同的模块。不同的module可以存入不同的数据和方法，使用起来非常方便。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 实现axios拦截、页面跳转和token 验证，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了vue router-link下划线和颜色问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue中v-model动态生成的实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
这篇文章主要给大家介绍了关于vue-cli配置使用Vuex的相关资料,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,本介绍的非常详细,需要的朋友可以参考下2021-07-07
本篇文章主要介绍了vue中用动态组件实现选项卡切换效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
vue在前端技术中使用越来越多，也成为了主流框架，今天咱花点时间学习下Vue与element-ui整合方式，本文结合示例代码给大家介绍的非常详细，需要的朋友参考下吧2022-04-04
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧2018-10-10
这篇文章主要为大家介绍了Vue中AXIOS的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要介绍了vue 框架下自定义滚动条(easyscroll)实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了Vue如何使用pdf-lib实现为文件流添加水印并预览的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起了解一下2023-03-03
最新评论