Vuex数据管理详解

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>