开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
一.创建vite+vue项目
1.在命令行输入以下创建语句。然后根据下图所示，输入项目名称并选择vue框架即可
npm create vite@latest
创建完成项目之后，根据提示，依次运行以下三个命令即可
cd 项目名
npm install
npm run dev
这样一个新的项目也就构建好了，也已经成功运行起来了
二.修改vite.config.js
新构建出来的项目运行起来后会出现一下问题
问题原因在于： 当 局域网 中另一台设备需要访问该服务时，必须通过本机 IP + 端口 访问。
尝试访问后，发现找不到这个服务，原因是 没有 将服务暴露在网络中
解决方法： 在vite.congif.js中修改 方法一：
export default defineConfig({
plugins: [vue()],
server:{ //添加这个配置就解决了
host:"0.0.0.0"
}
})
方法二： 修改npm脚本 package.json
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"preview": "vite preview --host 0.0.0.0"
},
以上方法皆可解决这个问题
三.安装vue-router与Pinia
注意一下v3的项目vue-router 需要4.0以上版本 命令行运行一下命令
npm install vue-router
npm install pinia
1.vue-router 使用
在src下新建 router文件夹，新建一个js文件文件 index.js
import {createRouter,createWebHashHistory} from "vue-router"
//定义路由数组
const routes =[
{ //基本格式
path:"/",
name:"home",
component:()=>import("../views/home/index.vue"), //组件对象
children:[]
}
]
//路由对象
const router = createRouter({
history:createWebHashHistory(),
routes
})
//导出路由对象在main.js中使用
export default router
在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')
在App.vue 中删除不需要的代码 添加一个路由的出口
<template>
<!-- 添加以下标签 -->
<router-view/>
</template>
这样就完成了简单的vue-router的使用
2.pinia 使用
在main.js中挂载实例
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router/index.js";
import {createPinia} from "pinia";
const pinia =createPinia() //创建pinia实例
//挂载实例
createApp(App)
.use(pinia)
.use(router)
.mount('#app')
在sre目录下创建stor文件夹，添加index.js文件
import {defineStore} from "pinia"
import {test} from "./test.js"; //引用其他模块的state
// 1. 定义容器、导出容器
// 参数1：容器的ID，必须是唯一的，后面Pinia会把所有的容器挂载到根容器
// 参数2：一些选项对象，也就是state、getter和action
// 返回值：一个函数，调用即可得到容器实例
export const userStore =defineStore('user',{
// 类似于Vue2组件中的data，用于存储全局状态数据，但有两个要求
// 1. 必须是函数，目的是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
// 2. 必须是箭头函数，这样是为了更好的 TS 类型推导
state:()=>{
return {
userName: "张三",
age: 99
}
},
actions:{
// 注意：不能使用箭头函数来定义actions，因为箭头函数绑定外部的this
changeUserName(state){
this.userName="张三2"
},
changeAge(){
this.age+=1
}
},
getters:{
number(state){
const testObj=test()
return this.age + testObj.cont
}
}
})
在页面的使用
<script setup>
import {storeToRefs} from "pinia"
import {userStore} from "./store/index.js";
const userObj=userStore()
// 解构数据，但是得到的数据是不具有响应式的，只是一次性的
// 相当于仅仅只是...mainStore而已，只是做了reactive处理，并没有做toRefs
// const { count, info } = useMainStore();
// 解决方法：
// 1. 通过使用toRefs函数，因为前面所说相当于是通过reactive处理，因此可以
// const { count, info } = toRefs(mainStore);
// 2. 通过pinia中提供的storeToRefs方法来解决，推荐使用
const {userName,age,number} = storeToRefs(userObj)
const changeAge=()=>{ //修改store的值
//方法1 调用actions 中的方法修改值
// userObj.changeUserName()
// userObj.changeAge()
//方法二
//调用 $patch 方法批量修改
userObj.$patch((state)=>{
state.age=11
})
}
</script>
<template>
<div>
<span @click="changeAge">{{userName}}</span><br>
<button>{{age}}</button><br>
<button>{{number}}</button>
</div>
<router-view/>
</template>
今天的分享就到这里了
