setup写法,toRefs和toRef,axios使用,promise语法,vue-router,pinia,elementui-plus

Ⅰ setup写法

【一】setup写法之ref

【1】父组件

<template>
  <h1>我是首页</h1>
  <HelloWorld msg="zyb" ref="myhello"></HelloWorld>
  <input type="text" v-model="username" ref="myinput">--->{{username}}
  <button @click="handleChange">点击查看</button>
</template>

<script setup>
import {ref,reactive} from "vue";
import HelloWorld from "./components/HelloWorld.vue";

// 1.导入ref  2. 定义一个变量，名字就叫在标签/组件上定义的名字
// 普通标签上
const myinput=ref('')
// 放在组件上
const myhello = ref('')
const handleChange=()=> {
  console.log(myhello.value.hobby)
  let res = myhello.value.add(7, 8)
  console.log(res)
  console.log(myhello.value)  // Proxy(Object)组件对象  所以可以在 .属性
  console.log(myinput.value)  // <input type="text"> dom对象  可以再.src 就跟以前一样
}
</script>

【2】子组件

<script setup>
import {ref,reactive} from "vue";

defineProps({
  msg: String,
})

// 子组件有变量 有方法
const hobby = ref('背带裤篮球')
const add = (a,b)=>{
  return a+b
}

// 需要声明能被使用  才能被父组件使用
defineExpose({hobby,add})

</script>

<template>
  <p>{{ msg }}</p>

</template>

【3】总结

# 1 父组件中使用
	-tmeplate:
         <HelloWorld msg="lqz" ref="myhello"></HelloWorld>
  		<input type="text" v-model="username" ref="myinput">-->>{{ username }}
     -js中：
    	# 普通标签上
		const myinput=ref('')
		# 放在组件上
        const myhello = ref()
        const handleChange=()=> {
        console.log(myhello.value.hobby)
        let res = myhello.value.add(7, 8)
        console.log(res)
        console.log(myhello.value)  # Proxy(Object)组件对象  所以可以 .属性
            # Proxy 是一个内置对象，它用于创建一个对象的代理，
        console.log(myinput.value)  # <input type="text"> dom对象  可以再.src 就跟以前一样
      }  # dom 文档对象模型，(Document Object Model）,它将网页上的每一个元素（如标签、属性、文本等）都视为一个对象，这些对象可以用 JavaScript 进行操作
        
# 2 在子组件中，必须定义 hobby和add，并且导出
	js:
        # 子组件有变量 有方法
        const hobby = ref('背带裤篮球')
        const add = (a,b)=>{
          return a+b
        }
        # 需要声明能被使用  才能被父组件使用
		defineExpose({hobby,add})

【二】setup写法之插槽

• https://cn.vuejs.org/guide/components/slots.html
• 还有其余写法可以在官网查看

【1】默认插槽

# 父

<template>
  <h1>我是首页</h1>
  <HelloWorld msg="zyb" >

    <div>
      <input type="text">
    </div>

  </HelloWorld>
</template>

# 子
  <template>
  <p>{{ msg }}</p>
  <slot></slot>

</template>

【2】具名插槽

（1）HelloWorld.vue---子组件

<script setup>

defineProps({
  msg: String,
})

</script>

<template>
  <slot name="b"></slot>
  <p>{{ msg }}</p>
  <slot name="a"></slot>
  <slot></slot>
</template>

（2）App.vue--父组件

<template>
  <h1>我是首页</h1>
  <HelloWorld msg="zyb" >
      
    <template v-slot:a>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201805%2F28%2F20180528114413_ramiz.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1726391859&t=67042ca042ccee1d2d96f8701934afb8" alt="">
    </template>
    
    <div>
      <input type="text">
    </div>

    <template #b>
      <input type="text">
    </template>

  </HelloWorld>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
</script>

【3】总结

---# 默认插槽
	还跟以前一样用



---# 具名插槽
    #  子组件照常用
          <slot name="b"></slot>
          <p>{{ msg }}</p>
          <slot name="a"></slot>

    # 父组件跟vue2不同
        - 方式一：
            <template v-slot:a>  # 来包裹 需要展示的插槽  template v-slot:a
        - 方式二：
            <template #b>   # template #b

Ⅱ toRefs和toRef

• vue3 提供的 toRefs--->在结构的时候—>把对象中的普通变量都做成响应式

# toRefs的使用--把对象中的普通变量都做成响应式
    # 1 toRefs 可以把对象内部的所有值，都做成响应式
    # 2 通过结构赋值，赋值给某些变量--->这些变量就有响应式
    # 3 改这些变量会影响到原来对象中得值

    const person = reactive({name: 'zyb', age: 19})
    # let res = toRefs(person)  // 把里面所有 普通变量做成响应式
    # console.log(res)
    # console.log(person)
    let {name, age:nl} = toRefs(person)  // 等同于： name=ref(zyb)   age=ref(19)
    # let {name, age} = person  // 等同于： name=zyb   age=19
    function add() {
      nl.value++
      console.log(nl.value)
    }
    
    
# toRef的使用  只对对象中的某个值做成响应式
const person = reactive({name: 'zyb', age: 19})
# const name=toRefs(person)  //{name:ref(name),age:ref(age)}
const name = toRef(person, 'name')  //name=ref(person.name)
function change() {
  name.value = 'xxx'
}

• 代码使用

<template>
  <h1>我是首页</h1>

</template>


<script setup>
import {ref, reactive, toRefs, toRef} from "vue";
// toRefs的使用   给多个变量结构赋值
// 1 定义对象，使用reactive 包裹
// const person=reactive({name:'zyb',age:19})
// 2 解构 这个变量-->虽然被reactive 包裹 ，依然可以解构赋值
// "解构赋值"通常指的是将一个可迭代对象（如列表、元组等）中的多个值一次性赋值给多个变量
// 通过解构赋值，你可以轻松地将数据解构并赋值给多个变量
// let {name,age}=person
// console.log(typeof name)   // string
// console.log(typeof age)   // number
// age=99
// console.log(person.age) // 19
// 3 结构出来的name和age，是没有响应式
    // string, number
// 4 使用一种方式，变成响应式
// let {name,age}=toRefs(person)
// console.log(typeof name)   //  object
// console.log(name.value)   // zyb
// console.log(typeof age)   // object
// console.log(age.value)    // 19
// age.value=99
// console.log(person.age) // 99


//  toRef的使用 给单个变量结构赋值
const person=reactive({name:'zyb',age:19})
const age=toRef(person,'age')  //  toRef 给单个变量结构赋值
console.log(typeof age)  // object
console.log(age.value)  // 19

</script>

Ⅲ axios使用

【一】安装

• npm install axios -S

【二】基本使用

<template>
  <h1>电影</h1>
  <div v-for="item in film_list.results">
    <h3>{{ item.name }}</h3>
    <p>{{ item.synopsis }}</p>
    <img :src="item.poster" height="400px" width="250px">
  </div>

</template>


<script setup>
import {ref, reactive} from "vue";
import axios from 'axios'


// 1 普通写法
const film_list = reactive({'results': []})
// //发送axios请求
axios.get('http://127.0.0.1:8000/films/films/').then(res => {
  console.log(res.data.results)
  if (res.data.code == 0) {
    // 2.0  直接复制--也可以-->对象.属性改值-->有响应式
    // film_list.results = res.data.results
    // 2.1 直接把res.data.result 复制到filmList.result
    // Object.assign(film_list.results, res.data.results)

    // 2.2 结构赋值
    // let {results,code,msg} = res.data  // res={data:{code:0,msg:成功,results:[]}}
    // let {results} = res.data  // res={data:{code:0,msg:成功,results:[]}}
    // Object.assign(film_list.results, results)

    // 2.3结构赋值
    // let {data: {results}} = res
    // Object.assign(film_list.results, results)

    // 2.4 结构赋值
    let {data} = res  // {code:0,msg:成功,result:[]}
    Object.assign(film_list, data)

  } else {
    alert('失败')
  }
})


</script>

【三】async 和await 写法

<template>
  <h1>电影</h1>
  <div v-for="item in film_list.results">
    <h3>{{ item.name }}</h3>
    <p>{{ item.synopsis }}</p>
    <img :src="item.poster" height="400px" width="250px">
  </div>

</template>


<script setup>
import {ref, reactive} from "vue";
import axios from 'axios'
    
    
// 2 async 和await 写法
const film_list = reactive({'results': []})
//定义了一个协程函数--->函数内如果有io操作，就写await，原来then中的值，可以直接赋值给一个变量
async function load() {
  let res = await axios.get('http://127.0.0.1:8000/films/films/')
  Object.assign(film_list.results, res.data.results)
}

load()

</script>

• 这是个并行操作，async 和await 是一个携程函数 缺一不可，假如只有a,b,a运行后遇到是io操作 遇到await才回去切到b上运行 ， 再b上运行后遇到是io操作 遇到await再回去a
• 如果是有a,b,c a,b 都含有async 和await 是一个携程函数有io操作 他们就会切到c上运行完 在返回a，a的io结束再往后走，b的io结束再往后走

Ⅳ promise语法

【一】普通函数和回调函数

• 普通函数: 正常调用的函数,一般函数执行完毕后才会继续执行下一行代码

 <script>   
    let fun1 = () =>{
        console.log("fun1 执行了")
    }
    // 调用函数
    fun1()
    // 函数执行完毕,继续执行后续代码
    console.log("其他代码继续执行")
</script>

• 回调函数: 一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了

<script>
let fun1 = () =>{
        console.log("fun1 执行了")
    }
    fun1()
        // 设置一个2000毫秒后会执行一次的定时任务，基于事件自动调用，console.log先执行
    setTimeout(function (){
        console.log("延迟演示执行了")
    },2000)
    console.log("其他代码执行")
</script>

【二】promise简介

前端中的异步编程技术，多线程+线程结果回调！

# Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。

# 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

# Promise对象有以下两个特点。

（1）Promise对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

# 生活中案例
你跟你女朋友说，5年后等我赚够500w就结婚-->定义函数

     -1 进行中（努力赚钱，其他代码继续执行）
     -2 成功（赚够500w--->结婚）
     -3 失败（没赚够--->分手）

【三】 promise基本使用

// ES6规定，Promise对象是一个构造函数，用来生成Promise实例



<script setup>

    /*
    1.实例化promise对象,并且执行(类似Java创建线程对象,并且start)
    参数: resolve,reject随意命名,但是一般这么叫!
    参数: resolve,reject分别处理成功和失败的两个函数! 成功resolve(结果)  失败reject(结果)
    参数: 在function中调用这里两个方法,那么promise会处于两个不同的状态
    状态: promise有三个状态
            pending   正在运行
            resolved  内部调用了resolve方法
            rejected  内部调用了reject方法
    参数: 在第二步回调函数中就可以获取对应的结果
    */
    let promise =new Promise(function(resolve,reject){
        console.log("promise 开始执行")

      //  下面的执行时间可能会很久
        // resolve("promise 执行成功")
        reject("promise 执行失败")
    })
    console.log('11111')
    //2.获取回调函数结果  then在这里会等待promise中的运行结果,但是不会阻塞代码继续运行
    promise.then(
        function(value){console.log(`promise中执行了resolve:${value}`)},
        function(error){console.log(`promise中执行了reject:${error}`)}
    )
    // 3 其他代码执行
    console.log('222222')

</script>

// 执行顺序
1 console.log("promise 开始执行")
2 console.log('11111')
3 console.log('222222')
4 promise执行成功或失败打印的代码

【四】 Promise catch()

• Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

<script setup>

    let promise =new Promise(function(resolve,reject){
            console.log("promise 开始执行")
            //1 执行成功--走then
            // resolve("promise 执行成功")
            //2 执行失败--走catch
            //reject("promise 执行失败")
            // 3 故意响应一个异常对象--走catch
            throw new Error("error message")
        })
        console.log('11111')
        /*
            then中的reject()的对应方法可以在产生异常时执行,接收到的就是异常中的提示信息
            then中可以只留一个resolve()的对应方法,reject()方法可以用后续的catch替换
            then中的reject对应的回调函数被后续的catch替换后,catch中接收的数据是一个异常对象
            */
        promise.then(
            function(resolveValue){console.log(`promise中执行了resolve:${resolveValue}`)}
        ).catch(
            function(error){console.log(error)}
        )
        console.log('222222')
    
</script>

【五】 async使用

async和await是ES6中用于处理异步操作的新特性。通常，异步操作会涉及到Promise对象，而async/await则是在Promise基础上提供了更加直观和易于使用的语法。

async 用于标识函数的

async标识函数后,async函数的返回值会变成一个promise对象
如果函数内部返回的数据是一个非promise对象,async函数的结果会返回一个成功状态 promise对象
如果函数内部返回的是一个promise对象,则async函数返回的状态与结果由该对象决定
如果函数内部抛出的是一个异常,则async函数返回的是一个失败的promise对象

let aaa=new Promise(function(resolve,reject){})
等同于
async function aaa(){}
等同于
let aaa=async ()=>{}

• 使用

</template>
/*
      async 用于标识函数的
          1. async标识函数后,async函数的返回值会变成一个promise对象
          2. 如果函数内部返回的数据是一个非promise对象,async函数的结果会返回一个成功状态 promise对象
          3. 如果函数内部返回的是一个promise对象,则async函数返回的状态与结果由该对象决定
          4. 如果函数内部抛出的是一个异常,则async函数返回的是一个失败的promise对象

      */
    async function fun1(){
          // return 10   // 成功状态，走then  //  10  非promise对象,async函数的结果会返回一个成功状态 promise对象
          // throw new Error("异常状态，走catch")
          // let promise = Promise.resolve("成功状态，走then")   // 一个promise对象,则async函数返回的状态与结果由该对象决定   resolve  or reject
          // let promise = Promise.reject("失败状态，走catch")
          return promise
      }

    let promise =fun1()

    promise.then(
        function(value){
            console.log("success:"+value)
        }
    ).catch(
        function(value){
            console.log("fail:"+value)
        }
    )
</script>

【六】await使用

await右侧的表达式一般为一个promise对象,但是也可以是一个其他值
如果表达式是promise对象,await返回的是promise成功的值
await会等右边的promise对象执行结束,然后再获取结果,后续代码也会等待await的执行
如果表达式是其他值,则直接返回该值
await必须在async函数中,但是async函数中可以没有await
如果await右边的promise失败了,就会抛出异常,需要通过 try ... catch捕获处理

• 使用

<script>
    /* 
            1. await右侧的表达式一般为一个promise对象,但是也可以是一个其他值
            2. 如果表达式是promise对象,await返回的是promise成功的值
            3. await会等右边的promise对象执行结束,然后再获取结果,后续代码也会等待await的执行
            4. 如果表达式是其他值,则直接返回该值
            5. await必须在async函数中,但是async函数中可以没有await
            6. 如果await右边的promise失败了,就会抛出异常,可以通过 try ... catch捕获处理
        */

async function fun1() {
  // return 10
  // throw new Error('失败了')
  // return Promise.resolve('成功了')
  return Promise.reject('失败了')
}
async function fun2() {
  try {
    let res = await fun1()
    //let res = await Promise.reject("something wrong")
    console.log(res)
  } catch (e) {
    console.log("catch got:" + e)
  }

  console.log("2222")
}

fun2()

</script>

【七】axios 配合 await和async使用-->解决回调地狱

// promise语法 就是解决这种回调地狱问题

<script>
//  axios 配合 await和async使用-->解决回调地狱
async function fun111() {
  try {
    let res = await axios.get('http://127.0.0.1:8000/films/films/')
    // 进行后续操作==>赋值-->响应式，页面就变了
    let res1 =await  axios.get('http://127.0.0.1:8000/films/films/')   // 有问题就继续回调增加  let res1 =await  axios.get('http://127.0.0.1:8000/films/films/') 
    let res2 =await  axios.get('http://127.0.0.1:8000/films/films/')
  } catch (err) {
    console.log(err)
  }
}

fun111()
fun222()  //  如果想让两个并发  在这里调用两个


// 等同于下列写法   上面写法的好处  解决的回调地狱  axios.get().then(res1 => {}).catch(err1 => {}) 只有上个结束之后才能继续下一个  res1 => {} 在这里面继续增加回调函数  一直回调  一直增加太繁琐了 但是上面的就很方便


axios.get('http://127.0.0.1:8000/films/films/').then(res => {
  // 这里再发请求
  axios.get().then(res1 => {
    axios.get().then()
  }).catch(err1 => {
  })
}).catch(err => {
})

axios.get()


</script>

Ⅴ vue-router

【一】Vue3路由机制router，路由简介

# 什么是路由？
定义：路由就是根据不同的 URL 地址展示不同的内容或页面。
通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航。


# 路由的作用
单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

【二】vue-router使用安装

#  需要使用 vue-router 4版本及以上
	npm install -S vue-router@4

【三】路由跳转

• 重定向的作用：将一个路由重定向到另一个路由上

#1  this.$route   this.$router
import {useRouter, useRoute} from 'vue-router'
// this.$router  --->useRouter
// this.$route  --->useRoute

let router=useRouter()
let route=useRoute()

//路由跳转
router.push('/about?name=zyb&age=19')

# 2 其他都一样

【四】前置路由守卫

在 Vue 3 中，路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务，例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。Vue 3 为路由守卫提供了全面的支持，并提供了以下几种类型的路由守卫：

全局前置守卫：在路由切换前被调用，可以用于验证用户是否已登录、中断导航、请求数据等。
全局后置守卫：在路由切换之后被调用，可以用于处理数据、操作 DOM 、记录日志等。
守卫代码的位置: 在router.js中


//全局前置路由守卫
router.beforeEach( (to,from,next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path,from.path,next)

    //需要判断，注意避免无限重定向
    if(to.path == '/index'){
        next()
    }else{
        next('/index')
    }
    
} )

//全局后置路由守卫
router.afterEach((to, from) => {
    console.log(`Navigate from ${from.path} to ${to.path}`);
});

• 登录案例，登录以后才可以进入home,否则必须进入login

router.beforeEach((to, from, next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path, from.path, next)

    //需要判断，注意避免无限重定向
    if (to.name == 'home' || to.name == 'login') {
        next()
    } else {
        let token = localStorage.getItem('token')
        if (token) {
            next()
        } else {
            next('/login')
        }

    }

})

【五】前端vue代码

• App.vue

<template>


<router-view></router-view>

</template>

• main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index.js";

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

• router/index.js

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
import HomeView from "../views/HomeView.vue";
import LoginView from "../views/LoginView.vue";
import AboutView from "../views/AboutView.vue";

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/login',
        name: 'login',
        component: LoginView
    },
    {
        path: '/about',
        name: 'about',
        component: AboutView
    },

]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

router.beforeEach((to, from, next) => {
    //to 是目标地包装对象  .path属性可以获取地址
    //from 是来源地包装对象 .path属性可以获取地址
    //next是方法，不调用默认拦截！ next() 放行,直接到达目标组件
    //next('/地址')可以转发到其他地址,到达目标组件前会再次经过前置路由守卫
    console.log(to.path, from.path, next)

    //需要判断，注意避免无限重定向
    if (to.name == 'home' || to.name == 'login') {
        next()
    } else {
        let token = localStorage.getItem('token')
        if (token) {
            next()
        } else {
            next('/login')
        }

    }

})


export default router

• zyb/utils.js

import axios from "axios";
import {useRouter, useRoute} from 'vue-router'
// this.$router  --->useRouter
// this.$route  --->useRoute

export async function login(username, password) {
    let {data} = await axios.post('http://127.0.0.1:8000/login/', {username, password})
    if (data.code == 100) {
        let token = data.token
        localStorage.setItem('token', token)
        return Promise.resolve()

    } else {
        // alert(data.msg)
        // return Promise.reject(data.msg)
        throw new Error(data.msg)
    }

}

• views/HomeView.vue

<template>
<h1>首页</h1>
</template>

<script>

</script>

<style scoped>

</style>

• views/AboutView.vue

<template>
<h1>关于</h1>
</template>

<script setup>
import {useRoute} from 'vue-router'
let route=useRoute()
console.log(route.query)
console.log(route.params)

</script>

<style scoped>

</style>

• views/LoginView.vue

<template>
  <h1>登录</h1>
  <p><input type="text" v-model="username"></p>
  <p><input type="text" v-model="password"></p>
  <p>
    <button @click="handleLogin">登录</button>
  </p>

</template>

<script setup>
import {ref, reactive} from "vue";
import {login} from "../zyb/utils.js";
import {useRouter, useRoute} from 'vue-router'

let router = useRouter()
// this.$router  --->useRouter
// this.$route  --->useRoute
const username = ref('')
const password = ref('')
const handleLogin = () => {

  try {
    login(username.value, password.value)
    console.log('登陆成功')
    //路由跳转
    router.push('/about?name=zyb&age=19')

  } catch (err) {
    alert(err)

  }
}
</script>
<style scoped>
</style>

Ⅵ pinia

【一】Pinia介绍

# 如何实现多个组件之间的数据传递

方式1 组件传参

方式2 路由传参

方式3 通过pinia状态管理定义共享数据

当我们有多个组件共享一个共同的状态(数据源)时，多个视图可能都依赖于同一份状态。来自不同视图的交互也可能需要更改同一份状态。虽然我们的手动状态管理解决方案（props,组件间通信,模块化）在简单的场景中已经足够了，但是在大规模的生产应用中还有很多其他事项需要考虑：

更强的团队协作约定
与 Vue DevTools 集成，包括时间轴、组件内部审查和时间旅行调试
模块热更新 (HMR)
服务端渲染支持
Pinia 就是一个实现了上述需求的状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。https://pinia.vuejs.org/zh/introduction.html

【二】安装使用

# 状态管理器
npm install pinia -S

【三】基本使用

• 定义pinia store对象 src/store/store.js [推荐这么命名不是强制]

【1】全局使用pinia

• main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index.js";


// 导pinia
import {createPinia} from 'pinia'
// 创建pinia对象
let pinia = createPinia()


createApp(App).use(router).use(pinia).mount('#app')

【2】新建：store-->store.js

//  store-->store.js
import {defineStore} from 'pinia'

export const definedStore = defineStore(
    {
        id: 'storePinia', //必须唯一
        state: () => { // state中用于定义数据
            return {
                username: '胡图图',
                age: 5,
                hobbies: ['唱歌', '跳舞']
            }
        },
        getters: {// 用于定义一些通过数据计算而得到结果的一些方法 一般在此处不做对数据的修改操作
            // getters中的方法可以当做属性值方式使用
            getHobbiesCount() {
                return this.hobbies.length
            },
            getAge() {
                return this.age+1
            }
        },
        actions: { // 用于定义一些对数据修改的方法
            doubleAge() {
                this.age = this.age * 2
            }
        }
    }
)

//  store-->goods.js

import {defineStore} from 'pinia'

export const definedGoods = defineStore(
    {
        id: 'goodsPinia', //必须唯一
        state: () => { // state中用于定义数据
            return {
                name:'苹果'
            }
        },
    }
)

【3】组件中使用

<template>
<h1>首页</h1>

   {{ store.username }}-->{{ store.age }}
  <br>
  <button @click="store.doubleAge">点我-年龄翻倍</button>
  <hr>
  {{ goods.name }}

</template>

<script setup>

import {definedStore} from '../store/store';  //代指this.$store # 只代指 store.js 的对象
import {definedGoods} from '../store/goods';  //代指this.$store  # 只代指 good.js 的对象
let store = definedStore()
let goods = definedGoods()


// const handleAdd = () => {
//   store.doubleAge()
// }

</script>

<style scoped>

</style>

Ⅶ elementui-plus

【一】安装

npm install element-plus -S

【二】全局使用

# 使用main.js   
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";


import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(pinia).use(ElementPlus).mount('#app')

【三】组件使用

• 官网： https://element-plus.org/zh-CN/component/popover.html

//  复制粘贴即可
https://element-plus.org/zh-CN/component/popover.html
    
    
    

<template>
<h1>首页</h1>

  <el-button type="success" @click="handleShow">成功</el-button>
  <h1>表格</h1>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"/>
    <el-table-column prop="name" label="Name" width="180"/>
    <el-table-column prop="address" label="Address"/>
  </el-table>


</template>

<script setup>

import {ElMessage} from 'element-plus'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]



</script>

<style scoped>

</style>