Vue3移动端项目使用vuex处理用户token

优点：获取方便，vuex中的数据都是响应式的

缺点：刷新浏览器时，数据会丢失

解决办法：为了实现持久化操作，同时将数据存储到本地

1、安装依赖

npm install vuex@next --save

2、使用

（1）创建store容器

（2）指定state存储数据

（3）指定mutations方法，修改容器中的数据

文件路径：src/store/index.js

import { createStore } from "vuex";
// token名字，随便取
const TOKEN_KEY = 'HOPE_USER'
const store = createStore({
    // 1、指定state，存储用户信息（user），用户信息中包含了token
    // 从localStorage中获取用户信息
    state: {
        user:JSON.parse(window.localStorage.getItem(TOKEN_KEY))
    },
    // 2、指定mutations修改容器中的数据
    mutations: {
        // 参数一state固定，参数二data表示传递过来的要修改的数据
        setUser(state,data){
            // 将data传递过来的新数据赋值给state.user，以更新数据
            state.user = data
            // 存储到本地
            window.localStorage.setItem(TOKEN_KEY,JSON.stringify(state.user))
        }
    }
})
// 导出
export default store

3、在Vue的实例中注入

路径：src/main.js

import { store } from './store'
createApp(App).use(Vant).use(router).use(store).mount('#app')

！！！可能存在的报错：

原因：export default 语句用于指定模块的默认输出，一个模块只能有一个默认输出，因此export default 命令只能使用一次，所以当我们使用 export default 导出时，用 import 导入不用加大括号

解决：引入时删掉 { }

import store from './store'
createApp(App).use(Vant).use(router).use(store).mount('#app')

4、在登录组件中使用store

路径：src/views/Login.vue

<script>
import {reactive,toRefs} from "vue"
import {Toast} from 'vant'
// 1、获取store容器
import {useStore} from 'vuex'

function userSubmit(user){
  // 2、实例化调用
  const store= useStore()
  const onSubmit=()=>{
    Toast.loading({
      message: '登录中...',
      forbidClick: true,
    });
    console.log(user);
    if(user.userName==='admin'&&user.userPwd===123456){
      Toast.success('登录成功');
      // 3、登录成功之后使用store
      store.commit('setUser',user)
    }else{
      Toast.fail('用户名或密码有误');
    }
  }
  const userFormRules={
    userName:[{required:true,message:'请输入用户名'}],
    userPwd:[{required:true,message:'请输入密码'},{pattern:/^\d{6}$/,message:"密码格式错误"}]
  }
  return{
    onSubmit,
    userFormRules
  }
}
export default{
  setup() {
   const user = reactive({
        userName:'',
        userPwd:''
   })
    return {
      ...toRefs(user),
      ...userSubmit(user)
    }
  }
}
</script>

更直观版：

 5、结果：

login页面登录，登录成功之后，f12查看application，在Local Storage中有token就成功了