uniapp项目如何使用vuex #Vuex状态管理

目录

什么是uniapp！不解释啦。

那什么是Vuex！就是状态管理呗，大家可以去官网康康！Vuex官网

如何在uniapp项目中使用

首先，我们需要安装vuex：（我就使用npm安装咯）

 然后，需要在main.js下导入vuex并且挂载上它：

再然后，举个"栗子"，我做的是登录接口时获取和修改里面的状态：

最后

---

最近在捣鼓uniapp，需要用到vuex！那就浅浅更新一下，Vue3.0都开始用Pinia来管理状态啦，怎么才学习Vuex呀，因为在学习走流程呗哈哈哈，这俩其实大方向上区别不大，只是Pinia比它更高级一点，性能呀，功能呀，效果可能会好一点，而且还能结合TS，所以我这次分享的是Vuex。

什么是uniapp！不解释啦。

那什么是Vuex！就是状态管理呗，大家可以去官网康康！Vuex官网

如何在uniapp项目中使用

首先，我们需要安装vuex：（我就使用npm安装咯）

npm install vuex@next --save

安装成功之后可以在node_modules目录下看见vuex

 然后，需要在main.js下导入vuex并且挂载上它：

在此之前，我们还需要新建一个目录存放state的store目录文件：

store/index.js

// 模块化Vuex，用于管理所有Vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
const store =  new Vuex.Store({
	state: { // 存放数据 和data类似
		// 用户登录信息 
		UserInfo:{
		},
		Authorization: ""
	},
	mutations: { // 用来修改state和getters里面的数据
		storageUserInfo(state,obj){
			// console.log("测试对象是否能存进来",obj);
		},
		setAuthorization(state, str){
			state.Authorization = str
		}
	},
	getters: { // 相当于计算属性
		getAuthorization(state){
			return state.Authorization
		}
	},
	actions: { // vuex中用于发起异步请求
	},
	modules: {// 拆分模块
	}
})
export default store

你可以直接替换一下代码到你的main.js里：

main.js

// #ifndef VUE3
import Vue from 'vue'
import App from './App'
import store from 'store/index.js';

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	store,
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

再然后，举个"栗子"，我做的是登录接口时获取和修改里面的状态：

在界面vue中导入：

	import { mapState, mapMutations, mapGetters } from "vuex"

使用：

export default {
        // 数据和计算属性是用computed来调用vuex的数据信息
		computed:{
			...mapState(["UserInfo"]),
			...mapGetters(["getAuthorization"]),
		},
        // 修改状态时，使用methods来调用vuex里的方法
		methods: {
			...mapMutations(["storageUserInfo","setAuthorization"]),
			// 用户一键登录获取用户的openid
			wxLogin() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// console.log(loginRes);
						axios.post('/api/userInfo/login',{
							code: loginRes.code,
						}).then(res => {
							console.log("登录请求发送之后获取的请求头数据",res);
							const authorization = res.header.Authorization;
							that.setAuthorization(authorization);
							// console.log(that.getAuthorization);
							const text = res.data.data;
							const obj = that.convertTextToObject(text);
							// 将用户登录之后的信息存进vuex里
							that.storageUserInfo(obj);
							console.log("检查是否成功将数据存进vuex",that.$store.state);
							that.goToIndex();
						})
					}
				})
			},
			// 跳转到首页
			goToIndex(){
				if(this.getAuthorization != null){
					console.log("正在跳转！");
					uni.switchTab({
						url:"/pages/index/index",
					})
				}
			},
		}
    }

最后

因为我们都是使用import { mapState, mapMutations, mapGetters } from "vuex"来导入vuex了，所以在调用的时候是可以直接调用里面的数据和方法的，只是将这些数据存在一块而已，而且，如果我们需要将数据分模块储存哪又怎么做呢？大家可以评论区分享一下，不过我已经实现过了哦，可能后面会总结，大家可以先讨论一下！

感谢观看！