vue3/vite中创建与使用vuex 4.x

1.vuex 4.x 安装

npm install vuex@next --save

2.vuex 4.x 使用

2.1目录结构创建

在src目录下创建 store
在创建好的store目录下创建modules

2.2目录结构说明

modules目录:存放模块(例如:Test.js)
index.js:组装模块并导出 store 的地方

2.3 index.js配置

import {createStore} from 'vuex'
import Test from './modules/Test'//引用模块地址

export default createStore({
    modules: {
        a:Test//a为Test模块取别名
    }
})

2.4 模块配置(例Test.js)

export default {
    namespaced: true,//使其成为带命名空间的模块
    state: () => {
        //state:页面使用位置computed下...mapState
        return {
            testData: [1, 2, 3]//全局数据
        }
    }, getters: {
        //getters:页面使用位置computed下...mapGetters
        getDataTest: (state) => {
            console.log("getDataTest")
            return state.testData
        }
    }, mutations: {
        //mutations:页面使用位置methods下...mapMutations
        setTestData(state, data) {
            console.log("setTestData")
            console.log(data)
            state.testData = [3, 2, 1]

        }
    }, actions: {
        //actions: 页面使用位置methods下...mapActions
        actionSetTestData({commit}, data) {
            console.log("actionSetTestData")
            commit("setTestData", data)
        }
    }
}

2.5 项目根目录配置(main.js)

import {createApp} from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

3. 使用vuex

下面为vue页面示例代码

<template>
  <!--  正确:页面显示1.[ 3, 2, 1]-->
  <div>1.{{ $store.state.a.testData }}</div>
  <!--  正确:页面显示2.[ 3, 2, 1]-->
  <div>2.{{ testData }}</div>
  <!--  正确:页面显示3.[ 3, 2, 1]-->
  <div>3.{{ getDataTest }}</div>
  <!--  正确:至少控制台输出MouseEvent的数据 以及 页面数据都变成[ 3, 2, 1 ]-->
  <button @click="setTestData">测试一</button>
  <!--  正确:至少控制台输出[5020] 以及 页面数据都变成[ 3, 2, 1 ]-->
  <button @click="this.actionSetTestData([5020])">测试二</button>
  <!-- 正确:至少控制台输出两行{0: 1, 1: 2, 2: 3}-->
  <button @click="test">测试二</button>
</template>

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

export default {
  data() {
    return {}
  }, computed: {
    ...mapState('a', {
      testData: state => state.testData
    }),
    ...mapGetters('a', ["getDataTest"])
  }, methods: {
    ...mapMutations('a', ["setTestData"]),
    ...mapActions('a', ["actionSetTestData"]),
    test() {
      console.log(this.testData)
      console.log(this.getDataTest)
    }
  }
}
</script>

<style scoped>

</style>

4.案例正确页面(参考)

如button样式不同,不必理会

附:本文章的案例资源:

使用的编辑器 idea

蓝奏云
https://www.lanzouw.com/i9RsGvnnlyh
密码:787n