526互联

vue3中使用模块化vuex

发布时间 2023-09-14 11:12:36作者: 妞妞猪

话不多说直接上手

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