--- title: vuex状态管理 category:

• 前端 tag:
• uniapp

---

 

vuex状态管理

应用中，保持登录状态是常见需求，本文讲解使用uni-app框架时如何保持用户登录状态。 即：初次进入应用为未登录状态------->登录---------->关闭应用，再次打开--------->为已登录状态 传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态，但是uni-app不支持对cookie的读写。因为uni-app框架的主体是 VUE，所以可以使用 vuex 进行登录态管理。 关于vuex中定义的全局变量和方法需要定义在指定目录的文件内。 即在项目目录下新建名称为 store 的目录，目录下创建用于定义全局变量和方法的js文件，如下图：

index.js文件内容如下图所示：

// vuex状态管理
//demo中的数据是模拟状态数据，用于测试，实际使用中，请根据您自己的业务编写
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	// 全局属性变量
	state: {
		blutooString:"",//进制数据
	},
	//全局同步方法
	mutations: {

	},
	//全局异步方法
	actions: {

	},
	// Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算
	getters: {
		//用户是否登录
		blutooString(state, getters) {
			return state.blutooString
		},
	}
})
export default store

想要定义的这个 js 文件中的变量和方法能在各个页面使用并生效，需要先在项目目录下的 main.js 文件中导入这个 js 文件并声明方法，如下图所示：

声明结束后就可以在页面中监控全局变量和相应方法了，下面在一个登录页面中具体展示。

先在页面导入vuex的方法，如下：

import {
		mapGetters,
		mapMutations
	} from 'vuex'

然后，在 computed 计算属性方法中使用 mapState 对全局变量进行监控，在 method中使用 mapMutations 进行全局方法监控，如下所示：

在vue页面中调用修改与调用

let a = this.$store.state.blutooString //调用

this.$store.state.blutooString = '121212' //修改

在js文件中调用与修改

// 单独文件中使用vuex
import store from '@/store'

let a = store.state.blutooString //调用

store.state.blutooString = '121212' //修改