【备战春招】第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、甚至是嵌套子模块——从上至下进行同样方式的分割