Vuex的使用

一、什么是 Vuex

• state
  • Vuex 中的公共的状态, 我是将 state 看作是所有组件的 data, 用于保存所有组件的公共数据
• mutations
  • store 中的 methods, 用于修改 state
  • 第一个参数是 state, 第二参数是 payload, 即自定义参数
  • 只包含同步操作
• actions
  • 通过 commit 提交 mutations，mutations 修改 state 中的数据
  • 可以包含异步操作

二、实战

• 目录
  

• main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

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

• store.js

import Vue from 'vue'
import Vuex from 'vuex'
import count from './modules/count.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    count
  }
})

export default store

• count.js

const state = {
  pageNum: 0
}

const actions = {
  addPageNum ({ commit }, payload = 0) {
    return commit('ADD_PAGE_NUM', payload)
  }
}

const mutations = {
  ADD_PAGE_NUM (state, n) {
    return (state.pageNum += n)
  },
  REDUCE_PAGE_NUM (state, n) {
    return (state.pageNum -= n)
  }
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

• HelloWorld.js

<template>
  <div class="hello">
    <h1>{{ pageNum }}</h1>
    <div>
      <button @click="handleAddCount(10)">增加</button>
      <button @click="handleReduceCount(10)">减少</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  name: 'HelloWorld',
  computed: {
    ...mapState('count', ['pageNum'])
  },
  methods: {
    handleAddCount (n) {
      this.$store.dispatch('count/addPageNum', n)
    },
    handleReduceCount (n) {
      this.$store.commit('count/REDUCE_PAGE_NUM', n)
    },
    ...mapActions('count', ['addPageNum']),
    ...mapMutations(['ADD_PAGE_NUM', 'REDUCE_PAGE_NUM'])
  }
}
</script>

<style scoped></style>

• 在扩展工具 devtool 中进行结果展示