vue3响应式原理 vue3使用router vuex4 pinia的使用与传值 storeToRefs的使用
创建vue3项目命令 : npm create vite
vue3的响应式原理
vue3中的响应式原理为proxy 做到数据影响视图 视图影响数据 叫做响应式(双向数据绑定)
总结:
通过proxy 代理整个对象,视图到数据的变化是通过 event handle 操作事件 (DOM监听)
数据影响视图是通过 event binding 数据劫持来实现的
vue-router集成
安装vue-router yarn add vue-router@4 | npm install vue-router@4;
创建并配置路由
2.1 创建文件router/index.js
2.3 在index.js中创建并配置路由const mainRouter = createRouter({history:‘路由模式’,路由规则表})
常见路由模式 createWebHashHistory() url带# ,createWebHistory（）url不带#，需要 服务器支持
2.4 导出路由 export default routers;
注意： 在使用createRouter、createWebHistory 、createWebHashHistory时候要先从vue-router中导包。
在main.js 中使用路由 const app = createApp(根组件).use(路由).mount(容器)
3.1 导入配置好的路由router；
3.2 创建app, const app = createApp(根组件).;
3.3使用router, app.use(router);
3.4 将app挂载到容器中app.mount(‘#app’)
在根组件App中添加路由出口,匹配到的路由将会渲染在这里
以在根组件App中添加路由导航 (可选项
useRoute()和useRouter()
useRoute是用来获取参数的 useRouter是用来做路由跳转的
（1）通过useRoute()可以获取route信息
Home
（2）通过useRouter()可以获取router信息
在vue3中使用 vuex4
无法直接在setup中使用数据 要想拿到数据具体操作如下
1.新建store文件夹建index.js文件 通过createStore 创建store 在store中定义state,mutations actions getters 导出store实例
2.在main.js中 导入store 并挂载实例到项目中 import store from './store' app.use(store)
3.在组件中通过useStore 拿到store实例来使用store数据
// 在模板中可以通过$store.state.money 获取数据
money: {{ store.state.money }}
// 通过getters触发getters
double: {{ store.getters.double }}
// 通过commit 触发mutation
Pinia的使用
:定义一个 Store | Pinia 中文文档您将喜欢使用的 Vue 存储库https://pinia.web3doc.top/core-concepts/#%E4%BD%BF%E7%94%A8-store
- store 模块，
store/store.js。 - 在main.js中配置Pinia 使和项目产生关系
- 在组件 APP.vue中使用
下载插件 yarn add pina 或者 npm i pina
-
state: 状态。
-
actions: 修改状态（包括同步和异步，Pinia 中没有 mutations）。
-
getters: 计算属性。
state的使用
// 创建 store，命名规则：useXxxxStore // 参数 1：store 的唯一表示
通过defineStore创建命名空间 定义store 实例 并导出
在组建中 导入store实例 通过store实例名.属性名 和方法名来使用
actions的使用
在 Pinia 中没有 mutations，只有 actions，不管是同步还是异步的代码，都可以在 actions 中完成
总结
- 在actions 中可以定义同步异步方法
- actions中的方法直接修改数据this.数据名
- 在template中使用方法 （store的变量名.方法名）
getters的使用
pinia中的getters和vuex中的基本是一样的，计算state的状态值。
可以通过 this来获取结果 并return
也可以通过参数的方式来获取结果
总结
- 在getters中定义计算方法，
- 方法中操作数据并返回
- 在视图中使用计算值
storeToRefs
直接结构store实例会 使数据丢失响应式
通过storeToRefs包裹 store实例可以解决这一问题
storeToRefs只能把state里面的数据变为单独的响应式 的 ref 但是不能结构 actions中的方法
对于actions中的方法的结构可以直接从 store实例中解构出来
pinia的分离和合并
当组建中 需要导出的store实例过多时可以 在store文件夹中新建文件js文件来封装store实例并导出
在组件中按需导入(解构出来)
思维导图笔记
复制粘贴到浏览器
https://www.processon.com/view/link/62d4a9631efad4037a10a059
https://gitee.com/link?target=https%3A%2F%2Fwww.processon.com%2Fview%2Flink%2F62d4a9631efad4037a10a059