9-1vuex-day02

一、this.$store.commit()

直接派发一个事件给mutations

<h2 @click="handleClick">{{this.$store.state.city}}</h2>

<script>
export default {
  name: 'home',
  methods:{
    handleClick(){
      /* 派发一个事件 */
      this.$store.commit("changeCity")
    }
  }
}
</script>

mutations: {
    changeCity(state){
      state.city="成都"
    }
  },

二、mapState

如果有多个数据需要获取，使用这个辅助函数效率更高

export default new Vuex.Store({
  state: {
    city:"武汉",
    name:"杨丽蓉",
    age:21,
    sex:'女'
  }
  ...
})

<template>
  <div class="home">
    <h2>{{city}}</h2>
    <h2>{{age}}</h2>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  name: 'home',
  computed:{
    ...mapState(['city','name','age','sex'])
  }
}
</script>

三、mapActions

映射actions中的事件

<template>
  <div class="home">
    <h2>{{this.$store.state.count}}</h2>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
  </div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
  name: 'home',
  methods:{
    ...mapActions(['increase','decrease'])
  }
}
</script>

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    myincrease(state){
      state.count++;
    },
    mydecrease(state){
      state.count--;
    }
  },
  actions: {
    increase(ctx){
      ctx.commit("myincrease")
    },
    decrease(ctx){
      ctx.commit("mydecrease")
    }
  }
  ...
})

四、mapMutations

映射mutations中的事件

<template>
  <div class="home">
    <h2>{{this.$store.state.count}}</h2>
    <button @click="myincrease">增加</button>
    <button @click="mydecrease">减少</button>
  </div>
</template>
<script>
import {mapMutations} from 'vuex';
export default {
  name: 'home',
  methods:{
    ...mapMutations(['myincrease','mydecrease']),
  }
}
</script>

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    myincrease(state){
      state.count++;
    },
    mydecrease(state){
      state.count--;
    }
  },
  actions: {
    increase(ctx){
      ctx.commit("myincrease")
    },
    decrease(ctx){
      ctx.commit("mydecrease")
    }
  }
  ...
})

五、getters、mapGetters

mapGetters将store中的getters属性映射到局部计算属性

<template>
  <div class="home">
    <h2>{{this.$store.state.count}}</h2>
    <h3>{{this.$store.getters.myCount}}</h3>
    <button @click="increase">增加</button>
    <button @click="decrease">减少</button>
  </div>
</template>
<script>
import {mapActions,mapGetters} from 'vuex';
export default {
  name: 'home',
  methods:{
    ...mapActions(['increase','decrease'])
  },
  computed:{
    ...mapGetters(['myCount'])
  }
}
</script>

export default new Vuex.Store({
  ...
  getters:{
    myCount(state){
      return "当前的数量:"+state.count;
    }
  }
})

六、分模块 modules

作用：当store对象非常复杂的时候，我们可以根据将其拆分成不同的模块

6-1新建modules文件夹，拆分modules

//user.js

const user = {
    state:{
        name:"杨丽蓉"
    },
    mutations:{},
    actions:{},
    getters:{}
}
export default user;

//info.js

const info = {
    state:{
        tips:12,
        news:15
    },
    mutations:{
        add(state){
            state.tips++;
        },
        reduce(state){
            state.tips--;
        }
    },
    actions:{},
    getters:{}
}
export default info;

6-2使用数据

<template>
  <div class="home">
    <h2>首页</h2>
    <h3>{{tips}}</h3>
    <h4>{{news}}</h4>
    <h5>{{name}}</h5>
    <button @click="add">增加</button>
    <button @click="reduce">减少</button>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
  name: 'home',
  computed:{
    ...mapState({
      tips:state => state.info.tips,
      news:state => state.info.news,
      name:state => state.user.name
    })
  },
  methods:{
    ...mapMutations(['add','reduce'])
  }
}
</script>

七、vuex,axios拦截器实现Loading

7-1设置axios的拦截器

`yarn add axios``
配置axios —-main.js

import axios from 'axios'
Vue.prototype.axios = axios;
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  store.state.isLoading = true;
  return config;
});
axios.interceptors.response.use(function (response) {
  // Do something with response data
  store.state.isLoading = false;
  return response;
});

7-2在vuex的state属性中设置isLoading

export default new Vuex.Store({
  state:{
    isLoading:true
  }
  ...
})

7-3使用

<p v-if="this.$store.state.isLoading">正在加载中</p>

八、模块化导入方案

8-1export default

var a = 10;
var b = 20;
export default {
  a,
  b
}

//About.vue
import data from './data.js'
mounted(){
  console.log(data)  //{a:10,b:20}
}

8-2、export

导出: export {a,b}
导入: import {a,b} from './data.js'