Vuex之mutation和action

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>