VUE3.0 VUEX模块的用法

2.modules

存在两种情况

        默认的模块，state区分模块，其他getters,mutations,actions都在全局

        带命名空间namespaced:true,的模块，所有功能区分模块，更高封装度和复用

import { createStore } from 'vuex'

// vue2.0 创建仓库 new Vuex.Store({})
// vue3.0 创建仓库 createStore({})
// A模块
const moduleA = {
  state: {
    userName: 'moduleA'
  },
  getters: {
    newName (state) {
      return state.userName + '!!!!!'
    }
  },
  mutations: {
    updateName (state) {
      state.userName = "moduleAAAAAA"
    }
  }
}
// B模块
const moduleB = {
  namespaced: true,
  state: {
    userName: 'moduleB'
  },
  mutations: {
    updateName (state) {
      state.userName = 'ls'
    }
  },
  actions: {
    updateName (ctx) {
      // 发请求
      setTimeout(() => {
        ctx.commit('updateName')
      }, 1000)
    }
  },
  getters: {
    newName (state) {
      return state.userName + '2222'
    }
  }
}


export default createStore({
  modules: {
    moduleA,
    moduleB
  }
})

代码中的应用

<template>
  <div>
    <!-- 使用A模块的state数据 -->
    <p>{{ $store.state.moduleA.userName }}</p>
    <!-- 使用A模块的getters数据 -->
    <p>{{ $store.getters.newName }}</p>

    <!-- 使用B模块的state数据 -->
    <p>{{ $store.state.moduleB.userName }}</p>
    <!-- 使用B模块的getters数据 -->
    <p>{{ $store.getters["moduleB/newName"] }}</p>
    <button @click="mutationsFn">mutation</button>
    <button @click="actionsFn">actions</button>
  </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'app',
  setup () {
    const store = useStore()
    // 调用B模块的修改
    const mutationsFn = () => {
      store.commit('moduleB/updateName')
    }
    // 调用B模块的actions
    const actionsFn = () => {
      store.dispatch('moduleB/updateName')
    }
    return { actionsFn, mutationsFn }
  }
}
</script>

<style>
</style>