图解vue x + NutUI 3.0最简单的储存用户信息案例

一、安装NutUI 3.0插件

npm i @nutui/nutui@3

京东APP 10.0规范# Vue3 H5 项目

二、在main.js中引入 

代码如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注意：这种方式将会导入所有组件
import NutUI from "@nutui/nutui";
// 采用按需加载时  此全局css样式，需要删除
import "@nutui/nutui/dist/style.css";

createApp(App).use(NutUI).use(store).use(router).mount('#app')

三、找到store/index.js输入以下代码 

 四、找到HomeView.vue输入代码 

<template>
  <div style="display:flex;justify-content:center;align-items:center;">
    <div style="width: 500px;">
      <nut-input label="手机号" placeholder="请输入手机号" v-model=tel type="tel" />
      <nut-input label="密码" placeholder="请输入密码" v-model=pws type="password" />
      <nut-animate type='jump' :loop='true'><nut-button type="success" @click="tijiao">点击提交</nut-button></nut-animate>
    </div>
  </div>
</template>
<script>
//getCurrentInstance访问内部组件实例 代替this
import { getCurrentInstance, ref } from 'vue';
export default {
  setup() {
    // 在 vue3 中放弃了 Object.defineProperty 来进行数据劫持，而改用了 Proxy 替代原本的方案。
    const { proxy } = getCurrentInstance()
    const tel = ref()
    const pws = ref('')
    const tijiao = () => {
      if (tel.value == proxy.$store.state.iphone && pws.value == proxy.$store.state.password) {
        // console.log( proxy.$store.state.iphone);
        alert('登录成功')
      } else {
        alert('登录失败')
      }
    }
    return {
      tel, pws, tijiao
    };
  }
}
</script>

运行结果