vue笔记4 vue3核心语法和pinia基础使用
vue3 & pinia
首先抛出一张图，这是一张 vue 项目 script 代码的图，当我们使用 vue2开发的时候，默认使用的是 options API，这样的书写方式，会导致功能和功能直接的数据定义，函数逻辑处理分散在多个地方，不利用代码维护和阅读，在 vue 3 中，推出了一种新的灵活简便的书写方式
这里我们先使用 vue cli 安装 vue3 & pinal
1.初始化项目
如果没有下载 vue cli 可以先使用 npm 全局安装 vue cli
npm install -g @vue/cli
vue create my-vue3-app
这里安装完成我们就可以启动项目了
项目启动成功
使用开发工具打开项目
2.修改写法
这里要将的第一个点，如何把这种option的写法改成compontion
第一步，去掉 export default
第二部，加上 setup 语法糖在 script 标签
然后你会发现项目仍然没有报错
这里其实问题就来了，那我应该如何定义响应式数据呢？没了data？
3.定义数据以及新写法
这里先删除 Helloword 子组件
1.reactive & shallowReactive
reactive：定义一个响应式数据
shallowReactive： 定义一个根响应式数据，也就是说，只是第一层深度的数据是响应式的
使用 reactive 定义响应式的对象数据
demo
<template>
<div id="app"><div>{{myData}}</div><div><button @click="handler">修改数据</button></div>
</div>
</template><script setup>
import {reactive} from "vue";const myData = reactive({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
});
const handler = () => {myData.friends.push('钱七');
}
</script><style>
#app {width: 100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>这里点击按钮你可以发现是可以动态修改页面
<template>
<div id="app"><div>{{myData}}</div><div><button @click="handler">修改数据</button></div>
</div>
</template><script setup>
import { shallowReactive} from "vue";const myData = shallowReactive({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
});
const handler = () => {myData.friends.push('钱七');
}
</script><style>
#app {width: 100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>但是如果是一个 shallreactive，你会发现不行
那就是说，这里可以修改 age 或者 name 我们试试
<template>
<div id="app"><div>{{myData}}</div><div><button @click="handler">修改数据</button></div>
</div>
</template><script setup>
import { shallowReactive} from "vue";const myData = shallowReactive({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
});
const handler = () => {// myData.friends.push('钱七');myData.name = '李四';
}
</script><style>
#app {width: 100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>发现是可以修改的
2.ref（普通类型） 访问需要value
使用 ref 定义一个基本类型 studentName = 李白
使用按钮修改这个响应式数据
这里发现可以修改
<template>
<div id="app"><div>学生姓名：{{studentName}}</div><div>{{myData}}</div><div><button @click="handler">修改数据</button></div>
</div>
</template><script setup>
import {ref, shallowReactive} from "vue";const myData = shallowReactive({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
});const studentName = ref('李白');
const handler = () => {// myData.friends.push('钱七');// myData.name = '李四';studentName.value = '杜甫';
}
</script><style>
#app {width: 100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>注意我们的修改方式是通过 .value 的方式
3.readonly shallReadonly
我们这里定义一个只读数据并且修改它，就会报错
const myData2 = readonly({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
})
const studentName = ref('李白');
const handler = () => {// myData.friends.push('钱七');// myData.name = '李四';// studentName.value = '杜甫';myData2.name = '李四';
}
这里我们定义一个 shallowReadOnly，并且修改第二层发现可以，但是修改不了第一层
const myData2 = shallowReadonly({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
})
const studentName = ref('李白');
const handler = () => {// myData.friends.push('钱七');// myData.name = '李四';// studentName.value = '杜甫';myData2.name='张三';
}
<template>
<div id="app"><div>学生姓名：{{studentName}}</div><div>{{myData}}</div><div>{{myData2}}</div><div><button @click="handler">修改数据</button></div>
</div>
</template><script setup>
import { ref, shallowReactive, shallowReadonly} from "vue";const myData = shallowReactive({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
});const myData2 = shallowReadonly({name: '张三',age: 18,friends: ['李四', '王五', '赵六']
})
const studentName = ref('李白');
const handler = () => {// myData.friends.push('钱七');// myData.name = '李四';// studentName.value = '杜甫';// myData2.name='张三';
}
</script><style>
#app {width: 100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>4.computed
接下来就是我们的计算属性写法：
可以通过函数 computed 参数是我们的函数
看测试：
我们点修改数据会使用一次，刚开始初始化会使用一次
<template><div id="app"><div>{{ str }}</div><div>字符串长度：{{ handler1 }}</div> <!-- 直接显示计算结果 --><div><button @click="modifyStr">修改数据</button> <!-- 另定义一个方法修改 str --></div></div>
</template><script setup>
import {computed, ref} from "vue";const str = ref('132165');// 计算属性：返回 str 的长度
const handler1 = computed(() => {console.log("计算属性执行了");return str.value.length;
});// 定义一个方法，用于修改 str
const modifyStr = () => {str.value = "新的字符串";
};
</script><style>
#app {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>
5.watch
这里使用 watch 监听，这个时候我们使用按钮就可以修改数据，并且可以使用监听器监听到
<template><div id="app"><div>{{ str }}</div><div>字符串长度：{{ handler1 }}</div> <!-- 直接显示计算结果 --><div><button @click="modifyStr">修改数据</button> <!-- 另定义一个方法修改 str --></div></div>
</template><script setup>
import {computed, ref, watch} from "vue";const str = ref('132165');// 计算属性：返回 str 的长度
const handler1 = computed(() => {console.log("计算属性执行了");return str.value.length;
});// 定义一个方法，用于修改 str
const modifyStr = () => {str.value = "新的字符串";
};watch(str, (newVal, oldVal) => {console.log("str 发生了变化，新值：", newVal, "旧值：", oldVal);
});</script><style>
#app {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>
6.watchEffect
这是一个可以监听多个响应式数据的函数，也就是这里面使用到的响应式数据只要有一个修改就会触发
<template><div id="app"><div>{{ str }}</div><div>字符串长度：{{ handler1 }}</div> <!-- 直接显示计算结果 --><div><button @click="modifyStr">修改数据</button> <!-- 另定义一个方法修改 str --></div></div>
</template><script setup>
import {computed, ref, watch, watchEffect} from "vue";const str = ref('132165');// 计算属性：返回 str 的长度
const handler1 = computed(() => {console.log("计算属性执行了");return str.value.length;
});// 定义一个方法，用于修改 str
const modifyStr = () => {str.value = "新的字符串";
};watchEffect(()=>{console.log("watchEffect 执行了" + str);
})
</script><style>
#app {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>
这里初始化的时候会触发一次，单击按钮修改的时候夜壶触发一次
pinia
https://pinia.vuejs.org/zh/getting-started
第一步安装依赖：
npm install pinia
在main.js创建并使用
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from "pinia";const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app');定义store
新建文件夹 store 存放全局状态
import {defineStore} from "pinia";import {computed, reactive} from "vue";export const useUserStore = defineStore('user', ()=>{const user = reactive({name:'未登录',userAge:3,isLogin:false});const addAgeCount = computed(()=>{return user.userAge+1});function addAge() {user.userAge++}return {user, addAgeCount, addAge}})
这里的定义，不用写 mutations getters state 了
响应式变量 ref 或者 reactive 就是 state
computed 就相当于 getters
function 相当于 actions & mutations
这里的 function 是可以异步
使用 store
如何使用呢？？
更简单了
首先先定义 userStor 展示的位置
然后这里直接使用 useUserStor 就可以拿到全局状态
如果需要修改或者访问直接通过拿到的实例对象 userStore.状态.属性 或者 userStore.函数进行修改
<template>
<!-- <div id="app">-->
<!-- <div>{{ str }}</div>-->
<!-- <div>字符串长度：{{ handler1 }}</div> <!– 直接显示计算结果 –>-->
<!-- <div>-->
<!-- <button @click="modifyStr">修改数据</button> <!– 另定义一个方法修改 str –>-->
<!-- </div>-->
<!-- </div>--><div id="app">user信息：<div>{{userStore.user.name}}</div><div>{{userStore.user.userAge}}</div><div>{{userStore.user.isLogin}}</div><div><button @click="handler">增加年龄</button></div></div>
</template><script setup>
import {useUserStore} from "@/store/user";const userStore = useUserStore();
function handler() {userStore.addAge();
}
</script><style>
#app {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
</style>