uniapp开发中vuex的用法,直接拿来复制就可以使用

174 阅读1分钟

我们在开发过程中需要保存数据,保存数据的方式有三种,今天就给大家详细说说vuex的数据保存方式

  • 创建一个store文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		login:{},
		hasLogin:false
	},
	mutations : {
		login(state,provider) {
			state.hasLogin = true
			state.login.token = provider.token
			state.login.uuid = provider.uuid
			uni.setStorage({
				key:'login',
				data:provider
			})
		},
		logout(state) {
			state.hasLogin = false
			state.login = {}
			uni.removeStorage({
				key:'login'
			})
		}
	},
	actions: {
		
	}
})

export default store
  • 之后我们来到 main.js中

// 引入文件
import store from './store/store.js'

//设置全局属性
Vue.prototype.$store = store

  • 用法
// 保存数据
this.$store.commit('login',res)

// 取数据js中
import store from '../store/store.js'

store.state.hasLogin


// 取数据vue中
this.$store.state.hasLogin

  • 监听store中属性的变化

computed: {
	loginState() {
		return this.$store.state.hasLogin
        }
},
watch: {
	loginState: {
		handler(val) {
			// 在这里处理自己的逻辑,例如重新请求数据等
                         
		},
		deep:true,
		immediate: true
	}
}