VUE学习笔记——Vuex

import Vue from 'vue'
import App from './App'
import router from './router'
  //第一步：引入store文件夹
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //第二步：引入store对象
  store,
  components: { App },
  template: '<App/>'
})

三、配置store/index.js
state：
vuex 管理的状态对象,初始化状态数据
actions：
（1）包含多个事件回调函数的对象
（2）组件中 $store.dispatch(‘action 名称’, data1) ——触发actions——触发 mutation（更新 state）
（3）可以包含异步代码(定时器, ajax)

const actions = { 
    zzz ({commit, state}, data1) { 
    	commit('YYY', {data1}) 
    } 
}

mutations：
（1） 包含多个直接更新 state 的方法(回调函数)的对象
（2）只能包含同步的代码, 不能写异步代码

const mutations = { 
    YYY (state, {data1}) {
    	 // 更新 state 的某个属性 
     } 
 }

getters：
（1） 包含多个计算属性(get)的对象
（2）$store.getters.xxx 读取getters对象
（3）只能包含同步的代码, 不能写异步代码

const getters = {
     mmm (state) { 
     	return ...
     }
 }

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

Vue.use(Vuex)

const state = {
  count: 0      //初始化状态数据
}

const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}

const actions = {
  increment ({ commit }) {
    commit('INCREMENT')
  },
  decrement ({ commit }) {
    commit('DECREMENT')
  },
  //条件
  incrementOfOdd ({ commit }) {
    if (state.count % 2 === 1) {
      commit('INCREMENT')
    }
  },
  //异步
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('INCREMENT')
    }, 1000)
  }

}

const getters = {
  evenOrOdd (state) {
    return state.count % 2 === 0 ? '偶数' : '奇数'
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

四、配置app.vue

<template>
  <div>
    <p>click {{$store.state.count}} times,count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOfOdd">increment if add</button>
    <button @click="incrementAsync">increment if async</button>
  </div>
</template>

<script>
  export default {
    computed:{
      evenOrOdd(){
      //必须写this.
        return this.$store.getters.evenOrOdd
      }
    },
    methods:{
      increment(){
        this.$store.dispatch('increment')
        // const count = this.count
        // this.count = count+1
      },
      decrement(){
        this.$store.dispatch('decrement')
        // const count = this.count
        // this.count = count-1
      },
      //如果是奇数，加一
      incrementOfOdd(){
        this.$store.dispatch('incrementOfOdd')
        // const count = this.count
        // if(count%2===1){
        //   this.count = count+1
        // }
      },
        //异步，过1s才增加
      incrementAsync(){
        this.$store.dispatch('incrementAsync')
        // setTimeout(() => {
        //   const count = this.count
        //   this.count = count+1
        // }, 1000)
      }
    }
  }
</script>

五、代码优化 （app.vue）——**mapState,mapActions,mapGetters,mapMutations **

mapState：
...mapState(['count'])

相当于

count(){
   return this.$store.state.xxx
 }

mapGetters：

...mapGetters(['evenOrOdd'])

相当于

evenOrOdd(){
    return this.$store.getters.evenOrOdd
}

mapActions：

...mapGetters(['incrementOfOdd'])

相当于

incrementOfOdd(){
   this.$store.dispatch('incrementOfOdd')
 }

mapMutations：

...mapMutations(['decrement'])

相当于

decrement({ commit }){
     return this.$store.commit('DECREMENT')
 }

<template>
  <div>
    <p>click {{$store.state.count}} times,count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOfOdd">increment if add</button>
    <button @click="incrementAsync">increment if async</button>
  </div>
</template>
<script>
import {mapState,mapActions,mapGetters} from 'vuex'
  export default {
    computed:{
      ...mapState(['count']),
      ...mapGetters(['evenOrOdd'])
      // evenOrOdd(){
      //   return this.$store.getters.evenOrOdd
      // }
    },
    methods:{
      ...mapActions(['increment','decrement','incrementOfOdd','incrementAsync'])
    }
  }
</script>