展示类微信小程序_Vue组件间通信 Vuex的用法解析

摘要: Vue部件间通讯 Vuex的使用方法分析 -新手 本文关键详细介绍了Vue部件间通讯-Vuex,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参照学习培训...

Vue组件间通信 Vuex的用法解析     -小白   这篇文章主要介绍了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',ponents: { 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应该用于所有业务逻辑的数据。不涉及到业务逻辑的,建议大家用上一章的方法: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可以存入不同的数据和方法,使用起来非常方便。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:小程序开发