vue3中使用模块化vuex

话不多说直接上手

1.安装vuex的依赖（vue3版本）

npm i vuex@4

2.在src目录下新建vuex的文件夹，并且新建store.js文件

在store.js中写入 （这里使用模块化的方式）

//引入vuex插件

import { createStore } from 'vuex'

import userModule from './module/user.js'

// 创建store对象, 管理三个核心对象

const store = createStore({

    //使用模块化

    modules:{

        userModule

    }

})

//导出store

export default store

3.新建用户模块userMoudle.js，在新建的module文件夹下

const user = {

    namespaced:true,

    state:{

        userName: 'lzz',

        admin: 'admin'

    },

    mutations: {

        setName (state, newName) {

          state.userName = newName

        }

    },

    actions: {

        updateName ({ commit }, newName) {

          commit('setName', newName)

        }

    },

    getters:{

        userName (state) {

            return  state.userName

        }

    }

}

export default user

4.在main.js里引入刚才的store.js文件

import store from './vuex/store';

app.use(store);

5.在组件中使用（这里只贴出了取值和设置值的方法）

<script setup>

import { useStore } from 'vuex'

const store = useStore()

//vuex取值

const data=computed(()=>{

    return store.state.userModule.userName

})

console.log(data.value)

 

//vuex存值

setTimeout(()=>{

  store.dispatch('userModule/updateName','luzanzan')

  console.log(data.value)

},1000)

</script>

成功获取和设置

参考  https://blog.csdn.net/w137160164/article/details/131158381

https://blog.csdn.net/qq_41880073/article/details/124199104