vue3 vuex存取数据以及初始化数据

登录验证码

在template里面

<img @click="codeFun" :src="imgsrc" alt=""> 

在script中

import { reactive,onMounted,ref} from 'vue'

export default {
    setup(){
        //验证码图片初始化
        const imgsrc=res('http://47.93.101.203/adminapi/captcha_pro?') 
        //点击验证码图片
        const codeFun=()=>{
            //更新图片
            imgsrc.value='http://47.93.101.203/adminapi/captcha_pro?'+Date+now()
        }
    }
    //初始化 与 事件函数 都要return出去
    return{
        imgsrc,
        codeFun
    }
}

vuex存取

安装vux持久化

npm i vuex-persistedstate --save 
//复制代码

在store/modeules/user.js

const state={
    userInfo=[],
},
const mutations={
    getUser(state,val){
        state.userInfo=val
    }
},
const actions={},

export default {
    state,
    mutations,
    actions,
    namespaced:true
}

store/index.js中

import user from './modules/user.js';
import createPersistedState from 'vuex-persistedstate';
export default createStore({
    modules: {
            user,
            home,
    },
    plugins: [
        createPersistedState({
            storage:window.sessionStorage,
        }),
    ],
});

登录页面存储用户信息

import {useStore} from 'vuex'
setup(){
    const store=useStore()
    //在登录点击提交事件中 校验成功 将用户信息存到vuex中
    store.commit('user/getUser',[{name:'admin'}])
    return{
        store
    }
}

取vuex中的数据

import { useStore } from 'vuex';

setup(){
     const store=useStore()
    const token=store.state.user.userInfo.data.token  //data是根据http请求数据 图片如下：
    const imgUrl = store.state.user.userInfo.data.logo;
}

vue3数据请求

import { reactive,onMounted,ref} from 'vue'
import {getShopList} from '@api'  //数据请求的api
setup(){
    const data=ref([])
    
   onMounted(()=>{
        getShopList().then(res=>{
            // console.log(res);
            data.value=res.data
        }),
    })
}