Vuex

Vuex

1. state

在store中定义数据，在组件中直接使用

export default new Vuex.Store({
  state: {
    num: 0
  }
})

<template>
  <h1>
    {{$store.state.num}}
  </h1> 
</template>

或者

<template>
  <h1>
    {{num}}
  </h1> 
</template>

<script>
  export default {
    computed: {
      num(){
        return this.$store.state.num
      }
    }
  }
</script>

2.getters

相当于组件中的computed，getters是全局的，computed是组件内部使用的

export default new Vuex.Store({
  state: {
    num: 0
  },
  getters: {
    getNum(state){
      return state.num
    }
  }
})

<template>
  <h1>
    {{$store.getters.getNum}}
  </h1> 
</template>

<script>
  export default {
 
  }
</script>

3.mutations

相当于组件中的methods, 但不能使用异步方法（如定时器, axios等）

export default new Vuex.Store({
  state: {
    num: 0
  },
  getters: {
    getNum(state){
      return state.num
    }
  },
  mutations:{
    increase(state, payload){
      state.num += payload ? payload : 1;
    }
  }
})

<template>
  <div>
    <button @click = "addFn">
      点击加
    </button>
  </div>
</template>

<script>
  export default {
 		methods: {
      addFn(){
        //传参时候，使用payload
        this.$store.commit('increase', 2)
      }
    }
  }
</script>

4. actions

专门用来处理异步，实际修改状态值的，还是mutations

export default new Vuex.Store({
  state: {
    num: 0
  },
  getters: {
    getNum(state){
      return state.num
    }
  },
  mutations:{
    increase(state, payload){
      state.num += payload ? payload : 1;
    }
  },
  actions:{
    increaseAsync（context){
    context.commit('increase')
  }
  }
})

this.$store.dispatch('increaseAsync')

5. 辅助函数

import {mapState} from 'vuex'
import {mapGetters} from 'vuex'

 export default {
 		computed:{
      ...mapState(['num']),
      ...mapGetters(['getNum'])
    }
  }

import {mapActions, mapMutations} from 'vuex'

 export default {
 		methods:{
      ...mapActions(['increaseAsync']),
      ...mapMutations(['increase'])
    }
  }