VUEX基础整理

一、基础1.vuex基本概念状态管理模式响应式数据state多组数据共享不同视图改变同一个状态2.vuex形成一个状态数据仓库（本质上是一个json对象）getter获取数据（相当于data和computed)difference)mutationtomodifydata(commitamutationtomodifydata,可以记录每次数据变化的历史，比如监控，用于同步操作)actionsubmitmutation异步操作3安装npminstallvuex创建vuex实例：newvueX.store()将vuex实例挂载到main.js中的vue对象4.demo(vue3)项目初始化npminstall-g@vue/clivuecreatevuex-demonpminstallvuexcode(main.js)importVuefrom'vue'importAppfrom'./App.vue'importVuexfrom'vuex'Vue.config.productionTip=falseVue.use(Vuex)conststore=newVuex.Store({state:{count:0},mutations:{add(state,v){//state.count++state.count=v}}})newVue({store,render:h=>h(App),}).$mount('#app')app.vue两个vuex实操1.登录操作关键代码片段main.jsroutingguardrouter.beforeEach((to,from,next)=>{if(store.state.userInfo||to.path==="/login"){next()}else{next({path:"/login"})}})login.vuesetTimeout(()=>{store.commit("login",{帐户：that.form.account，密码：that.form.password});store.commit("setMemberInfo",{userStatus:0,vipLevel:0});那.$router.push("./");},500);2.多组件共享会员信息getters.jsexportdefault{memberInfo(state){switch(state.userStatus){case0:return"普通会员"case1:return"vipmember"case2:return`AdvancedV${state.vipLevel}member`default:return"ordinarymember"}}}index.vue(vuex解构代码片段)传入一个数组import{mapGetters,mapState}from"vuex";computed:{...mapState(["userStatus","vipLevel"]),...mapGetters(["memberInfo"])},3.会员购买(调用突变)store/actions.jsexportdefault{//第一个参数是一个对象，第二个是参数buyVip({commit},e){returnnewPromise((resolve,reject)=>{//mockapi交互setTimeout(()=>{//修改本地状态commit("setMemberInfo",{userStatus:e.userStatus,vipLevel:e.vipLevel})resolve("购买成功")},1000)})}}userCenter.vuestore.dispatch("buyVip",e).then在action中调用异步方法dispatch传入两个参数（方法名，参数值）buy(e){store.dispatch("buyVip",e).then(res=>{alert(res);});}4。判断课程权限goVideoList(e){constres=this.checkPermission(e);if(res){this.$router.push({name:"course",params:{id:e.id}});}else{alert("权限不足，无法观看");}},checkPermission(e){constuserStatus=this.$store.state.userStatus;constvipLevel=this.$store.state.vipLevel;if(userStatus>=e.userStatus){if(vipLevel>=e.vipLevel){返回真；}else{返回错误；}}else{返回假；}}演示下载https://gitee.com/cherry32/vuex-demo.git的作者不简单。这个仓库是加密的。需要源码的请加我微信，打赏金币（一元）。我发给你~谢谢~