[JavaScript知识库] vue3使用模块化的 vueX

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3使用模块化的 vueX -> 正文阅读

[JavaScript知识库]vue3使用模块化的 vueX

一、检查自己项目中是否有vuex，没有的话下载安装。

我的目录结构：
在这里插入图片描述

二、写一个user.js，并导出。

在这里插入图片描述

三、写入口模块index.js。

导入createStore和自己写的模块，刚才我写的是user，然后把自己写模块注入到modules中
在这里插入图片描述

四、main.js中引入入口index.js，并且使用。

主要语句：
import store from './store‘
app.use(store)

import { createApp } from 'vue'
import App from './App.vue'
//引入状态
import store from './store'码片


const app = createApp(App)

//注入状态
app.use(store)

五、vue中使用:我想使用user模块的setupSession函数


<script>


import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const router = useRouter();
    const setupsession = store._mutations['user/setupSession'][0];


    const login = function login(state) {
     
      try{
       console.log(store)
       let data = api.auth.login(state.用户名, state.密码)
       setupsession(data)
       router.push('/')
      }catch(e){
        alert(e.message, '出现异常')
      }

    }

    return {
      login,

    }

  }
}


</script>