Vue路由守卫详解

Vuex是一个专为Vue.js应用开发的状态管理模式，集中式存储管理应用所有组件的状态。

Vuex遵循“单向数据流”理念，易于问题追踪以及提高代码可维护性。

Vue中多个视图依赖于同一状态时，视图间传参和状态同步比较困难，Vuex能够很好解决该问题。

actions：做一些业务逻辑，比如异步操作，处理复杂的业务逻辑，类似于controller

getters: 派生状态用法，根据当前状态计算其他值，计算属性

安装Vuex

//安装命令 vue add vuex

核心概念

state状态、数据mutations 更改状态的函数actions异步操作，处理复杂业务逻辑store 包含以上概念的容器

mutations与actions区别

mutations只修改状态，修改状态只能通过mutations修改

actions处理复杂业务逻辑，修改状态还得是mutations

状态和状态变更

state保存数据状态，mutations用于修改状态，

//store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 状态 state: { count: 0 }, //改状态的函数 mutations: { add(state,num = 1){ state.count += num; } }, //派生状态函数 getters: { //根据当前状态计算其他值，派生用法 score(state){ return 'score:' + state.count } }, //做复杂业务逻辑，异步操作，比如ajax请求 类似于controllers //业务场景：1、异步请求 2、同时修改多个状态（外围只要dispatch一次就好了） actions: { // {commit,state,getters} 解构上下文参数，后边num跟通知的参数 asyncAdd({commit,state,getters},num = 1){ //1.只修改状态 // setTimeout(()=>{ // commit('add', num) // },1000) //1.修改状态 2.通知外围调用者去做其他操作 return new Promise((resolve,reject)=>{ //模拟异步操作，执行成功通知修改状态 且通知外围的调用者去做一些其他的操作 setTimeout(()=>{ commit('add', num) //成功 resolve({ok:1}) //失败 // reject({ok:0}) },1000) }) } } }) //main.js import Vue from 'vue' import App from './App' import store from './store.js' Vue.config.productionTip = false Vue.use(store) new Vue({ el: '#app', store, components: { App }, template: '<App/>' }) //VuexTest.vue <template> <div> <h3>vuex test</h3> <!-- 基本用法 --> <p>{{$store.state.count}}</p> <!-- getters：派生状态（计算属性） --> <p>{{$store.getters.score}}</p> <!-- mutations：修改状态 --> <button @click="add">add</button> <!-- actions：异步操作 --> <button @click="asyncAdd">asyncAdd写法1</button> <button @click="asyncAdd2">asyncAdd写法2</button> </div> </template> <script> export default { methods: { add() { //单向数据流 不建议这样修改 // this.$store.state.count += 1 //mutations修改值状态 commit this.$store.commit('add',2); }, //Promise返回写法 asyncAdd(){ //actions修改值状态 dispatch this.$store.dispatch('asyncAdd', 3).then((result)=>{ if(result.ok === 1){ //路由跳转。。 alert('操作成功') } }).catch(()=>{ alert('操作失败') }); }, //async 结合 await写法 async asyncAdd2(){ //actions修改值状态 dispatch const result = await this.$store.dispatch('asyncAdd', 3); if(result.ok === 1){ //路由跳转。。 alert('操作成功') }else{ alert('操作失败') } } } } </script> <style> </style>