vue3初始化的数据

登录验证码

//template中
<img @click="imgDian" :src="imgsrc" alt="" />
复制代码

//script中  定义接收图片地址的值
 const ruleForm = reactive({imgcode: ""});
 //初始化值
  const imgsrc = ref("http://47.93.101.203/adminapi/captcha_pro?");
  //点击切换
  const imgDian = () => {
      imgsrc.value = "http://47.93.101.203/adminapi/captcha_pro?" + Date.now();
   };
   //必须return 出去
   return {
      imgDian,
      imgsrc，
      imgcode
    };
复制代码

vuex

安装vuex插件实现vuex持久化

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

新建一个store/user/user.js

//store/user/user.js

const state= {
    menus:[]
}
const mutations= {
    setUser(state,params){
        state.menus=params
    }
}
const actions= {}
export default{
    namespaced: true,
    state,mutations,actions
}
复制代码

store/index.js

//store/index.js

import { createStore } from 'vuex'
import createPersistedStata from 'vuex-persistedstate'//引持续化插件

import user from './user/user'  //引入 user模块

export default createStore({
  
  modules: {
    user   //引入 user模块
  },
  plugins:[
      createPersistedStata({
         key: 'erabbit-client-pc-store', //key是存储数据的键名
         paths: ['user', 'cart']    //paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如`user.token`
      )]//持续化默认存储到localStorage
   })

复制代码

在页面调用vuex定义的方法

//script
import { useStore } from "vuex";

export default {
    setup(){
        const store = useStore();
        store.commit("user/setUser", [1,2,3,4,5,7]);  //调用user里面的setUser方法
    }

}
复制代码

取出vuex里面的值

//script  
import { useStore } from "vuex";

export default {
  name: "Home",
  setup() {
    const store = useStore();
    const data = {
      token: store.state.user.menus,   //取出store/user/user.js 里面的menus
    };
    return {
      ...data,
    };
  },
};

复制代码

vue3初始化数据

在api/index.js里面定义请求数据的方法

export function ProductReplyTab(val) {
    console.log(val)
    // is_reply 1 已回复  0未回复    store_name 商品信息    account用户名称     data时间选择
    return request({                     
        url: `/adminapi/product/reply?is_reply=${val.is_reply}&data=${val.data}&store_name=${val.store_name}&account=${val.account}&product_id=0&page=${val.page}&limit=${val.limit}`,
        method: 'get',
    })
}

在页面里面请求

//script
import { ProductReplyTab } from "../../api/index";
//reactive 用来定义复杂数据类型  数组，对象
//ref  基本数据类型
//toRefs 用来解构复杂数据类型
import { onMounted, ref, reactive,toRefs } from "vue";

export default {
  setup() {
    let arr = reactive({ list: [] });  //定义存放数据的变量
    let count = ref();     //用来存多少条
    onMounted(() => {     //生命周期函数
      ProductReplyTab({    //调用方法
        is_reply: "",
        page: 1,
        limit: 15,
        data: "",
        store_name: "",
        account: "",
      })
        .then((res) => {     //成功获取数据
          arr.list = res.data.list;   //存值
          count.value = res.data.count;  //存值
        })
        .catch((err) => {
          console.log(err);
        });
    });
    let {list}= toRefs(arr)  //解构
    
    return {
      arr,
      list,
      count,
    };
  },
};