mutation

同步操作

基本使用

建立檔案

建立 client/store/mutations/

建立 client/store/state/mutations.js

宣告 mutations

// mutaions.js
export default {
  updateCount (state, num) {
    state.count = num
  }
}

引用 mutations

// store.js
import defaultState from './state/state'
import mutations from './mutations/mutations'
 
 // 引用
import getters from './getters/getters'

export default () => {
  return new Vuex.Store({
    state: defaultState, 
    mutations, // 注入
    getters
  })
}

使用 mutaions

<template>
  <div id="app">
    <p>{{count}}</p>
</template>
<script>
export default {
  mounted () {
    let
 
 i = 1
    setInterval(() => {
      this.$store.commit('updateCount', i++)
    }, 1000)
  },
    computed: {
        ...mapState({
          counter: (state) => state.count
        })
      }
}
</script>

mutations傳多個引數

commit 方法只能接受兩個引數，第一個引數是 state，第二引數，以物件的形式傳。

// app.vue
<script>
export default
 
 {
  mounted () {
    console.log(this.$store)
    let i = 1
    setInterval(() => {
      this.$store.commit('updateCount', {
        num: i++,
        num2: 2
      })
    }, 1000)
  }
}
</script>

export default {
  updateCount (state, { num, num2 }) { // es6 解構
    console.log(num2) // 打印出 2
    state.count = num
  }
}

store 使用規範

我們可以不通過 commit 來進行操作，但官方推薦都通過 commit，所以儘量杜絕不通過 commit 的操作。

通過設定生產環境的嚴格模式，來進行程式碼規範。

import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'

const isDev = process.env.NODE_ENV === 'development' // 注意，正式環境不能使用 strict
export default () => {
  return new Vuex.Store({
    strict: isDev, // 新增嚴格模式
    state: defaultState, 
    mutations,
    getters
  })
}

actions

非同步操作

基本使用

建立檔案

建立 client/store/actions/

建立 client/store/state/actions.js

宣告 actions

// actions.js
export default {
  updateCountAsync (store, data) {
    setTimeout(() => {
      store.commit('updateCount', {
        num: data.num
      })
    }, data.time)
  }
}

引用 actions

// store.js
import defaultState from './state/state'
import mutations from './mutations/mutations' // 引用
import getters from './getters/getters'
import actions from './actions/actions'

export default () => {
  return new Vuex.Store({
    state: defaultState, 
    mutations, 
    getters,
    actions // 注入
  })
}

使用 actions

<template>
  <div id="app">
    <p>{{count}}</p>
</template>
<script>
export default {
  mounted () {
   this.$store.dispatch('updateCountAsync', {
      num: 5,
      time: 2000
    })
  },
    computed: {
        ...mapState({
          counter: (state) => state.count
        })
      }
}
</script>

簡寫幫助方法

mapMutations 和 mapActions

<script>
import {
  mapState,
  mapGetters,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  mounted () {
    let i = 1
    setInterval(() => {
      this.updateCount({  // 呼叫方式也變了
        num: i++,
        num2: 2
      })
    }, 1000)
    this.updateCountAsync({ // 呼叫方式也變了
      num: 5,
      time: 2000
    })
  },
  computed: {
    ...mapState({
      counter: (state) => state.count
    }),
    ...mapGetters(['fullName'])
  },
  methods: {
    ...mapActions(['updateCountAsync']), // actions 簡寫
    ...mapMutations(['updateCount']) // mutations 簡寫
  }
}
</script>