vue3响应式原理 vue3使用router vuex4 pinia的使用与传值 storeToRefs的使用

创建vue3项目命令 : npm create vite

vue3的响应式原理

vue3中的响应式原理为proxy 做到数据影响视图 视图影响数据  叫做响应式(双向数据绑定) 

<script>
<p id="op"> p>
<input type="text" id="oInput">
// 当我们定一个对象数据
const data:{
name:'张三'
}
// 通过proxy 进行代理 生成一个代理对象 对这个代理对象的操作会影响到data
const proxyData =new Proxy(data,{
get(target,attr){
   // 从proxyDate中获取数据会走这里
   console.log(target) // data
   conlole.log(attr)   //'name'
  return target[attr]  //做到了对获取事件操作时的拦截
},
set(target,attr,value){
// 数据影响视图试听过 data binding
// 数据影响视图
op.innerHTML=value
target[attr]=value  // 做到了对修改数据操作时的拦截
 }
 })
 
// 视图影响数据 是通过event handle来实现
// DOM监听
// 对input进行修改 将name给value 
oInput.oninput=function(e){
proxyData.name=e.target.value
}
script>

总结:

通过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信息

<template>
    Home
    <button @click="getParams">获取url参数button>
template>

（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数据

 
<template>
  <div>
// 在模板中可以通过$store.state.money 获取数据
    
    <p>money: {{ store.state.money }}p>
// 通过getters触发getters
    <p>double: {{ store.getters.double }}p>
    <div>
// 通过commit 触发mutation
      <button @click="store.commit('changeMoney', 8)">change moneybutton>
      <button @click="store.dispatch('changeMoneyAsync', 3)">change money asyncbutton>
    div>
  div>
template>

Pinia的使用

:定义一个 Store | Pinia 中文文档您将喜欢使用的 Vue 存储库https://pinia.web3doc.top/core-concepts/#%E4%BD%BF%E7%94%A8-store

1. store 模块，store/store.js。
2. 在main.js中配置Pinia 使和项目产生关系
3. 在组件  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 中完成

 总结

1. 在actions 中可以定义同步异步方法
2. actions中的方法直接修改数据this.数据名
3. 在template中使用方法 （store的变量名.方法名）

getters的使用

pinia中的getters和vuex中的基本是一样的，计算state的状态值。

可以通过 this来获取结果 并return

也可以通过参数的方式来获取结果 

 总结

1. 在getters中定义计算方法，
2. 方法中操作数据并返回
3. 在视图中使用计算值

 storeToRefs

直接结构store实例会 使数据丢失响应式

通过storeToRefs包裹 store实例可以解决这一问题 

storeToRefs只能把state里面的数据变为单独的响应式 的 ref 但是不能结构 actions中的方法

 对于actions中的方法的结构可以直接从 store实例中解构出来

 pinia的分离和合并

当组建中 需要导出的store实例过多时可以 在store文件夹中新建文件js文件来封装store实例并导出

在组件中按需导入(解构出来)

思维导图笔记

复制粘贴到浏览器

https://www.processon.com/view/link/62d4a9631efad4037a10a059https://gitee.com/link?target=https%3A%2F%2Fwww.processon.com%2Fview%2Flink%2F62d4a9631efad4037a10a059