带命名空间的vuex的一些常规用法

直接讲解带命名空间的vuex的一些常规用法，我的文件夹结构是这样的

下面列写各个文件的内容

user.js

export default {
  state: {
    user: '',
    // 定义一个name，以供全局使用
    name: '张三',
    // 定义一个number，以供全局使用
    number: 0,
    // 定义一个list，以供全局使用
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' }
    ]
  },
  mutations: {
    setNumber (state) {
      state.number = 5
    },
    setNameWithParams (state, payload) {
      state.number = payload.value
    }
  },
  actions: {
    asyncSetNumber (content, payload) {
      console.log(content)
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          content.commit('setNameWithParams', { value: payload.value })
          resolve()
        }, 1000)
      })
    }
  },
  getters: {
    getModificationName (state) {
      return `hello${state.name}`
    }
  },
  namespaced: true
}

rootModule.js

export default {
  state: {
    root: 'root'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import rootModules from './rootModules'
Vue.use(Vuex)
const files = require.context('./modules', false, /\.js$/)
files.keys().forEach(key => {
  const store = files(key).default
  const moduleName = key.replace(/^\.\//, '').replace(/\.js$/, '')
  const modules = rootModules.modules = rootModules.modules || {}
  modules[moduleName] = store
  modules[moduleName].namespaced = true
  // console.log(key, store, moduleName, modules)
})

const store = new Vuex.Store(rootModules)
export default store

使用

<template>
  <div class="home">
   带命名空间的vuex的基本使用方法
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Home',
  async mounted () {
    // 以下是vuex的使用练习
    // 1.直接使用store中的数据
    console.log(this.$store.state.user.name)
    // 2.利用计算属性获取
    console.log(this.getName)
    // 3.辅助函数的使用
    console.log(this.user.name)
    // 4.赋值函数起别名
    console.log(this.aliasUser.name)
    // 5.使用getters方法
    console.log(this.$store.getters['user/getModificationName'])
    // 6.使用getters的辅助函数
    console.log(this.getModificationName)
    // 7.同步修改state中的值
    console.log(this.$store.state.user.number)
    this.$store.commit('user/setNumber')
    console.log(this.$store.state.user.number)
    // 8.传递参数修改state中的值
    this.$store.commit('user/setNameWithParams', { value: 666 })
    console.log(this.$store.state.user.number)
    // 9. 机构mapMutations
    console.log('mapMutations前的值:', this.$store.state.user.number)
    this.setNameWithParams({ value: 999 })
    console.log('mapMutations后的值:', this.$store.state.user.number)
    // 10. 异步action 传递参数
    console.log(`旧值：${this.$store.state.user.number}`)
    await this.$store.dispatch('user/asyncSetNumber', { value: 888 })
    console.log(`新值：${this.$store.state.user.number}`)
    // 11. mapActions
    console.log(`旧值：${this.$store.state.user.number}`)
    await this.asyncSetNumber({ value: 777 })
    console.log(`新值：${this.$store.state.user.number}`)
  },
  computed: {
    ...mapState(['user']),
    ...mapState({ aliasUser: 'user' }),
    ...mapGetters('user', ['getModificationName']),
    getName () {
      return this.$store.state.user.name
    }
  },
  methods: {
    ...mapMutations('user', ['setNameWithParams']),
    ...mapActions('user', ['asyncSetNumber'])
  }
}
</script>

打印的结果