本文主要是介绍在uni-app项目中使用VUE的好基友VUEX，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
VUEX
绝大多数的应用都需要支持非登录状态的预览功能，当用户感兴趣后再选择登录操作。
这个时候就会涉及到全局状态管理，vuex就是针对vue做全局状态管理的组件。
VUEX具体的使用场景：
- 用户在非登录状态可预览APP的首页和个人中心的内容。
- 当非登录状态的用户点击首页或个人中心的功能时，跳转到登录页面。
- 用户登录成功后返回原所在页面，首页和个人中心的用户登录状态都自动同步，页面无需重新加载。
优点
为什么会有这个东西呢？还不是因为在vue上要做全局状态管理非常麻烦且混乱。
使用vuex的好处：
- 能够在vuex中集中管理共享数据，易于开发和后期维护。
- 能够高效的实现组件之间的数据共享，提高开发效率。
- 响应式的机制，能够实时保持数据与页面的同步。
下面我将记录在uni-app中使用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中的数据。
- 在Vuex中只能通过mutation中修改store中的数据，不可以使用
this.$store.state.isLogin=true;直接修改。 - 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化，方便管理。
- 在mutations函数中不只能使用同步操作，不能使用异步操作，如需使用异步操作请看下面的Action。
mutations: {//设置用户信息，其中state为固定参数setUserInfo(state,data){state.userInfo = data;state.isLogin = true;}
}
- 调用方式1
//commit的作用就是触发某个Mutationthis.$store.commit('setUserInfo',info)
- 调用方式2
import {mapState,mapMutations} from 'vuex'
export default{data:{return{}},methods:{...mapMuatations(['setUserInfo']) //主要就可以直接使用了：this.setUserInfo(info)}
}
3.Action
Action用于处理异步任务。
- 如果通过异步操作变更数据，必须通过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的作用就是触发某个Actionthis.$store.dispath('setToastHideAsync',2000)
- 触发方式2：
参考Mutation中的方法。
4.Getter
Getter 用于对Store中的数据进行加工处理成新的数据。
- Getter 可以对 Store 中已有的数据加工处理后形成新的数据，类似Vue的计算属性。
- Getter 不会修改 Store 中的值。
- 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中的方法。
这篇关于在uni-app项目中使用VUE的好基友VUEX的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
