Java教程

【备战春招】第20天 登录权限实现一

本文主要是介绍【备战春招】第20天 登录权限实现一,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称: CRMEB uniapp电商项目二次开发实战

课程章节: 7-1 登录权限实现一
课程讲师: CRMEB

课程内容:
1、首先创建store文件,在store文件里新建一个user文件,分别创建getter.js\ index.js \ mutations.js \ state.js
state.js

export default {
	userInfo: null,
	token: '',
	currentAddress: null
}

getters.js

export default {
	isLogined (state) {
		return !!state.token
	}
}

mutations.js

export default {
	SET_USER_INFO: (state, user) => {
		state.userInfo = user
		uni.setStorageSync('user-info', JSON.stringify(user))
	},
	SET_TOKEN: (state, token) => {
		state.token = token
		uni.setStorageSync('token', token)
	}
}

创建authorization.js

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

export default {
	methods: {
		...mapGetters({
			isLogined: 'isLogined'
		})
	}
}

2、在main.js中使用

import Vue from 'vue'
import store from './store'
import App from './App'

import '@/utils/facade'

Vue.config.productionTip = false

App.mpType = 'app'

store.commit('INIT_USER_INFO')
store.commit('INIT_TOKEN')

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

课程收获:
这节课主要学习到了vuex状态管理Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,它有四个核心概念State、Getter、Mutation、Action、Module、这里主要用到了State、Getter、Mutation、Module,其中state类似vue中data在组建中直接使用是this.$store.state.count;还可以通过辅助函数mapState使用、Getter大多数是公共用到的数据比较多,用来过滤数据的,其中第一个参数是state,第二个参数是其他的getters,同样的也可以通过mapGetter对数据进行访问,Mutation是vuex中唯一一个处理store的方法,action也需要通过提交commit到mutation中才可以修改store中的数据,它的第一个参数也是state,第二个参数是载荷(传参最好是对象的形式)通过commit方式进行处罚,mutation是同步的 ,Action大多用在异步处理请求上,然后利用commit他调用mutation中的函数对数据进行访问,action在组件中通过dispatch进行派发,同样的第二个是参数,Module是将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

这篇关于【备战春招】第20天 登录权限实现一的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!