vuex之模块化

car.js

const state = {
  number: 0
};
const mutations = {
  changeNumber(state, val) {
    state.number += val
  }
};
const actions = {
};
export default {
  // 命名空间模块
  namespaced:true,
  state,
  mutations,
  actions
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import car from './car'

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    car
  }
})

index.vue

<template>
    <h1 @click="handleClick">{{number}}</h1>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState("car", ["number"])
  },
  methods: {
    handleClick() {
      this.changeNumber(2);
    },
    ...mapMutations("car", ["changeNumber"])
  }
};
</script>

<style lang="scss" scoped>
</style>