vuex - 状态管理学习

概述

Vuex是Vue.js应用程序的状态管理模式+库。
确保只能以可预测的方式改变状态
集中式存储和管理应用程序中所有组件的状态

安装

npm install vuex --save

基本流程

（一）.创建文件 vuex/index.js
//process.env.NODE_ENV 是开发环境(development、production)
手动设置环境变量

import Vue from 'vue'
import Vuex from 'vuex'

//作为插件引入
Vue.use(Vuex)

let store = new Vuex.Store({    //创建一个唯一的store,注意首字母大写->Store
  strict: process.env.NODE_ENV !== 'production', //添加严格模式，非mutation则不能改变state数据，否则报错
  state:{    //状态数据管理
    num:1
  },
  getters:{  //丰富状态中数据的返回方式
    getnum2:function(state){  //在computed中去获取getnum这个方法
      return state.num*2
    }
  },
  mutations:{  //mutations是唯一能改变state状态的方法
    fn1:function(state){  //state是mutations中的方法的参数
      state.num+=1;  //操作数据
    },
    fn2:function(state,obj){  //可以将变量用参数带过来，最好对象形式，这样传递数据更加丰富
      state.num+=obj.n;
    }
  },
  actions:{    //actions中的方法是唯一异步操作数据的
    delayfn1:function(context){  //context是一个类似vuex的实例，但是不是当前实例 
      setTimeout(function(){
        context.commit('fn1');  //异步修改数据的核心，还是触发mutations的方法
      },1000);
    },
    delayfn2:function(context,obj){  //传参的形式
      setTimeout(function(){
          context.commit('fn2',obj);  //如果带参数，带到mutations方法中去
      },1000);
    }
  }
})

export default store

（二）.在main.js入口文件中，引入声明的vuex/index.js

import Vue from 'vue'
import store from './vuex/'
import App from './App'

new Vue({
  el : "#app",
  store,
  template:"<app />",
  components:{
    App
  }
})

（三）.在单文件组件中，使用vuex状态管理
1.vue单文件组件中，template中的代码

  <div>
    <p> 数据： {{ num1 }}</p>
    <p> 通过getters获取的数据： {{ num2 }}</p>
    <a href="javascript:void(0);" @click="clickfn1">点击+1</a>
    <a href="javascript:void(0);" @click="clickfn2">点击+5</a>
    <p>异步操作</p>
    <a href="javascript:void(0);" @click="delayclickfn1">点击+1 异步操作</a>
    <a href="javascript:void(0);" @click="delayclickfn2">点击+10 异步操作</a>
  </div>

2.vue单文件组件中，script内的代码

export default {
  computed:{
    num1:function(){
      return this.$store.state.num;  //通过Vue实例上挂载的$store获取state中的数据
    },
    num2:function(){
      return this.$store.getters.getnum2;  //通过Vue实例上挂载的$store，获取getters上的 "数据乘2" 方法
    }
  },
  methods:{
    clickfn1:function(){
      this.$store.commit("fn1");  
      //通过事件触发clickfn1函数，在事件处理函数中，通过this.$store的commit触发mutations中的方法
    },
    clickfn2:function(){
      this.$store.commit("fn2",{ n:5 });
      //同上，在事件处理函数中，可以带参数带到commit触发mutations中的方法中
    },
    delayclickfn1:function(){
      this.$store.dispatch("delayfn1");
      //通过dispatch可以触发异步actions中的方法
    },
    delayclickfn2:function(){
      this.$store.dispatch("delayfn2",{ n:10 });
      //同上，可以带参数过去
    }
  }
}

vuex的简写方法 mapState , mapGetters , mapMutations , mapActions

在单文件组件中

1.template模板中的代码

  <div>
    <p> 数据： {{ num1 }}</p>
    <p> 通过getters获取的数据： {{ num2 }}</p>
    <a href="javascript:void(0);" @click="clickfn1">点击+1</a>
    <a href="javascript:void(0);" @click="clickfn2({ n:5 })">点击+5</a>
    <p>异步操作</p>
    <a href="javascript:void(0);" @click="delayclickfn1">点击+1 异步操作</a>
    <a href="javascript:void(0);" @click="delayclickfn2({ n:10 })">点击+10 异步操作</a>
  </div>

2.script标签中的代码

  import {mapState , mapGetters , mapMutations , mapActions} from 'vuex';  //数据结构方法
  
  export default {
    computed:{
      ...mapState({
         num1(state){
            return state.num;
         } 
      }),
      ...mapGetters({
          num2 : "getnum2"
      })
    },
    methods:{
      ...mapMutations({
        clickfn1 : "fn1",
        clickfn2 : "fn2"    //如果需要传参的话，直接写在template中
      }),
      ...mapActions({
        delayclickfn1 : "delayfn1",
        delayclickfn2 : "delayfn2"  //如果需要传参的话，直接写在template中
      })
    }
  }

【注】：修改函数名字
上面四种方式都可以使用简写形式：
使用别名：内部是对象
mapGetters({aaa:"bbb"}) 函数名为aaa
不适用别名：而不是数组
mapGetters(['bbb']) 函数名仍为bbb

modules 管理vuex中的模块

在vuex中，通过model 将不同的功能分开
方便我们更加快速的定位我们的需求位置

1.在vuex文件中

let module_aaa = {  //模块名
    state:{
        num:1
    },
    getters:{
        ...
    },
    mutations:{
        fn1:{...}
    },
    actions:{
        ...
    }
}

let store = new Vuex.Store({
    state:{
        rootnum:10
    },
    getters:{
        ...
    },
    mutations:{
        ...
    },
    actions:{
        rootfn:{...}
    },
    modules:{
        module_aaa
    }   
})

2.在单文件组件中，使用时候

获取数据时候

    this.$store.state.rootnum   //获取根上的数据
    this.$store.state.module_aaa.num  //获取指定模块的数据

触发的函数时候

    this.$store.commit('rootfn');
    this.$store.commit("fn1"); //【注意】：触发子模块的函数时候，不需要加模块名称

vuex核心流程图

vuex原理图.jpg

1.【Vue components】异步dispatch一个方法【后台 api通过ajax下载数据】
2.commit触发mutations方法改变【state】数据
3.【state】数据改变了 render 界面上【Vue components】

vue devtool

在浏览器中，添加vue devtool插件，可以随时监测mutations对state的数据影响
(这也是为什么修改state数据只能在mutation中操作)

在vue-cli中引入至vue实例

安装

npm install axios vue-axios --save

在入口文件main.js中，将其作为Vue插件使用

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,Axios)  //use里面有顺序先后

在单文件组件中使用（通过Vue原型就可以找到这个方法$http）

this.$http.get('xxxxx')
    .then((res)=>{
        console.log(res);
    })
    .catch((error)=>{
        console.log(error);
    })