vuex 學(xué)習(xí)筆記

(一)、 npm install vuex --save

(二)、創(chuàng)建目錄結(jié)構(gòu)

|-- store
|  |-- actions.js
|  |-- getters.js
|  |-- mutations.js
|  |-- store.js

(三)、引入相關(guān)文件并new一個(gè)Vuex.Store實(shí)例

//  sotre.js
import Vue from 'vue'
import Vuex from 'vuex'

import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

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

(四)、在src目錄下的main.js中引入store

//  src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'  //引入store

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

(五)、編寫(xiě)mutations

//  mutations.js
//  mutations中的方法必須是同步的(需要異步的話(huà)要使用actions)
//  每個(gè)mutation都有一個(gè)事件類(lèi)型（type）和一個(gè)事件處理函數(shù)（handle）
export default {
    increment(state){
        state.count += 1
    }
}

(六)、編寫(xiě)actions

//  actions.js
//  action 和 mutation 大致相同，區(qū)別是action不直接改變狀態(tài)，而是通過(guò)提交mutation改變狀態(tài)，而且action可以包含異步操作
export default {
    increment({commit}){
        commit('increment')
    }
}

(七)、編寫(xiě)getters

//  getters.js
export default {
    getCount(state){
        console.log(`count is ${state.count}`)
    }
}

(八)、使用store

//  App.vue
<template>
  <div id="app">
    <h1>{{count}}</h1>
    <button @click="incre">增加</button>
    <button @click="decre">減少</button>
  </div>
</template>

<script>
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'
export default {
  name: 'App',
  computed:{
    ...mapState(['count'])
  },
  methods:{
    ...mapMutations(['increment', 'decrement']),
    ...mapGetters(['getCount']),
    ...mapActions(['increment']),
    incre(){
      this.increment()
    },
    decre(){
      this.$store.commit('decrement')
    }
  }
}
</script>

(九)、mapState(['count'])

1. 、mapState是一個(gè)函數(shù)
2. 接收一個(gè)數(shù)組作為參數(shù),數(shù)組中的值是在store中定義的state的函數(shù)名
3. 、mapState返回的是一個(gè)對(duì)象

4. 要在computed屬性中進(jìn)行展開(kāi)

   
   
   mapState.jpg

(十)、mapMutations(['increment', 'decrement'])

1. mapMutations是一個(gè)函數(shù)
2. 接收一個(gè)數(shù)組作為參數(shù),數(shù)組中的值是在store中定義的mutations的函數(shù)名
3. mapMutations返回的是一個(gè)對(duì)象
4. 要在methods屬性中進(jìn)行展開(kāi)
5. mutations在調(diào)用時(shí)要用到 this.$store.commit(函數(shù)名)
   
   mapMutations.jpg

(十一)、mapActions(['increment'])

1. mapActions是一個(gè)函數(shù)
2. 接收一個(gè)數(shù)組作為參數(shù),數(shù)組中的值是在store中定義的actions的函數(shù)名
3. mapActions返回的是一個(gè)對(duì)象
4. 要在methods屬性中進(jìn)行展開(kāi)
5. actions在調(diào)用時(shí)要用到 this.函數(shù)名()
   
   mapActions.jpg
   <img src='./images/mapActions.jpg'>

(十二)、mapGetters(['getCount'])

1. mapGetters是一個(gè)函數(shù)
2. 接收一個(gè)數(shù)組作為參數(shù),數(shù)組中的值是在store中定義的getters的函數(shù)名
3. mapGetters返回的是一個(gè)對(duì)象
4. 要在methods屬性中進(jìn)行展開(kāi)
5. getters在調(diào)用時(shí)要用到 this.函數(shù)名()

mapGetters.jpg