写给新手同学的vuex快速上手指北小结

<template>
<div>
假如token的值123;
balabala的值就是 123皮卡皮
{{balabala}}
</div>
<template>
<script>
import { mapState } from 'vuex'
export default {
data(){
return {
pikaqiu:"皮卡皮卡"
}
}
computed:{
...mapState({
xiaokeai:"token",
dahuilang:"name",
// 为了能够使用 `this` 获取局部状态，使用一个自定义名字的函数
balabala(state){
return state.token + this.pikaqiu;
}
})
}
}
</script>

取个对象值怎么破？

<template>
 <div>
 {{daSon}}
 {{xiaoSon}}
 </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
  daSon: state=>state.obj.yeye.baba.daSon,
  xiaoSon:state=>state.obj.yeye.baba.xiaoSon,
 })
    }
  }
</script>

这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案

Getter篇

Getter是针对state的【对象】值提前做一些处理，以便用的时候直接提取

可以 this.$store.getters.xxx 使用,也可以使用mapGetters辅助函数，==辅助函数注意：== 和state一样，注入在computed中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 obj: {
  yeye: {
  baba: {
   daSon: "老大",
   xiaoSon: "老二"
  }
  }
 }
 },
 getters: {
    <!--将想要提取或者处理的值这里处理好-->
 getson: state => {
  return state.obj.yeye.baba;
 }
 }
})
export default store
<!--用的时候,和state一样，也可以别名等等操作-->
<template>
 <div>
    {{getson}}
 </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters([
    getson
  ])
 }
}
</script>

Mutation篇

操作： this.$store.commit(“名字”,”值”);

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 mutations: {
 setToken(state, val) {
  state.token = val;
 }
 }
})
export default store

mapMutations 辅助函数，和state一样，可以别名， ==注意：== 辅助函数注入在methods中