课程名称: 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、甚至是嵌套子模块——从上至下进行同样方式的分割