在uni-app项目中使用VUE的好基友VUEX

r囧r小猫 2022-12-27 08:43 225阅读 0赞

# VUEX #

绝大多数的应用都需要支持非登录状态的预览功能，当用户感兴趣后再选择登录操作。  
这个时候就会涉及到全局状态管理，vuex就是针对vue做全局状态管理的组件。

VUEX具体的使用场景：

1.  用户在非登录状态可预览APP的首页和个人中心的内容。
2.  当非登录状态的用户点击首页或个人中心的功能时，跳转到登录页面。
3.  用户登录成功后**返回原所在页面**，首页和个人中心的**用户登录状态都自动同步，页面无需重新加载**。

## 优点 ##

为什么会有这个东西呢？还不是因为在vue上要做全局状态管理非常麻烦且混乱。  
使用vuex的好处：

1.  能够在vuex中集中管理共享数据，易于开发和后期维护。
2.  能够高效的实现组件之间的数据共享，提高开发效率。
3.  响应式的机制，能够实时保持数据与页面的同步。

下面我将记录在uni-app中使用vuex做用户登录状态管理的全过程。

*  [vuex官网][vuex]

# 一、Vuex基本使用 #

## 1.安装 ##

在控制台通过npm安装vuex依赖包。

npm install vuex --save

## 2.创建store ##

在项目根目录下创建store文件，在该文件下创建index.js。

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    const store = new Vuex.Store({ 
    	state: { 
    		isLogin:false, //是否登录
    		//用户信息
    		userInfo:{ 
    			id:‘000000’,
    			name: '用户姓名'
    		}
    	},
    	mutations: { 
    		//设置用户信息
    		setUserInfo(state,data){ 
    			state.userInfo = data;
    			state.isLogin = true;
    		}
    	}
    })
    
    export default store

## 3.全局挂载 ##

在main.js进行全局挂载。

import store from './store'
    Vue.prototype.$store = store
    const app = new Vue({ 
    	store,
        ...App
    })

# 二、Vuex核心概念 #

## 1.State ##

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

*  例如  
    在state中添加一个isLogin属性。

state: { 
    	isLogin:false //是否登录
    }

应用有多个页面需要判断是否登录，直接在对应的地方使用以下代码进行获取：

*  获取方式1

this.$store.state.isLogin //获取登录状态

*  获取方式2

import { mapState} from 'vuex'
    export default{ 
    	data:{ 
    		return{ }
    	},
    	computed:{ 
    		...mapState(['isLogin']); //这样使用起来就更方便了：{ {isLogin}}
    	}
    }

在登录页面修改isLogin值：

//修改登录状态
     this.$store.commit('setUserInfo'，info)

> vuex是中的值是响应式的，也就是说只需要在登录页面修改isLogin的值，就会主动同步到所有使用isLogin参数的页面中。

## 2.Mutation ##

Mutation用于变更Store中的数据。

1.  在Vuex中只能通过mutation中修改store中的数据，不可以使用`this.$store.state.isLogin=true;`直接修改。
2.  通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化，方便管理。
3.  在mutations函数中不只能使用同步操作，不能使用异步操作，如需使用异步操作请看下面的Action。

mutations: { 
    	//设置用户信息，其中state为固定参数
    	setUserInfo(state,data){ 
    		state.userInfo = data;
    		state.isLogin = true;
    	}
    }

*  调用方式1

//commit的作用就是触发某个Mutation
     this.$store.commit('setUserInfo',info)

*  调用方式2

import { mapState,mapMutations} from 'vuex'
    export default{ 
    	data:{ 
    		return{ }
    	},
    	methods:{ 
    		...mapMuatations(['setUserInfo']) //主要就可以直接使用了：this.setUserInfo(info)
    	}
    }

## 3.Action ##

Action用于处理异步任务。

1.  如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation中的方式间接变更数据。

state: { 
    		isToast:false //当前是否有Toast提示框
    	},
    	mutations: { 
    		//设置状态
    		setToastHide(state){ 
    			state.isToast= false ;
    		}
    	},
    	actions:{ 
    		//因为Tosat有延时关闭，所以需要延时修改状态;默认1.5秒后关闭
    		setToastHideAsync(context,time=1500){ 
    			setTimeout(()=>{ 
    				context.commit('setToastHide')
    			},time)
    		}
    	}
    }

*  触发方式1:

//dispath的作用就是触发某个Action
     this.$store.dispath('setToastHideAsync',2000)

*  触发方式2：  
    参考Mutation中的方法。

## 4.Getter ##

Getter 用于对Store中的数据进行加工处理成新的数据。

1.  Getter 可以对 Store 中已有的数据加工处理后形成新的数据，类似Vue的计算属性。
2.  Getter 不会修改 Store 中的值。
3.  Store 中数据发送变化时，Gettr 的数据也会跟着变化。

state: { 
    		isToast:false //当前是否有Toast提示框
    	},
    	mutations: { 
    		//设置状态
    		setToastHide(state){ 
    			state.isToast= false ;
    		}
    	},
    	getters:{ 
    		showToastState:state =>{ 
    			return (state.isTost)?'当前有未关闭的提示':'当前可以弹出新提示'
    		}
    	}
    }

*  调用方式1：

//直接使用
     this.$store.getters.showToastState

*  触发方式2：  
    参考Mutation中的方法。

[vuex]: https://vuex.vuejs.org/zh/