组件

一个.vue 文件就是一个组件，分为根组件和组件

吐槽：vue的官网文档，是我见过最垃圾的，说不明白，让新手很难上手。当我多次再来看的时候，依旧懵懵懂懂。很多都搞不清。谁说前端简单？我给他大比斗

 

一般将App.vue作为根组件，将vue2_demo和vue3_demo等作为子组件导入并注册

// App.vue
<script>
import Vue2Demo from './components/vue2_demo.vue';
import Vue3Demo from './components/vue3_demo.vue';

export default {
  components: {
    Vue2Demo,
    Vue3Demo
  }
}
</script>

<template>
  <div>
    <vue2-demo />
    <vue3-demo />
  </div>
</template>

 

 

在main.js中，将使用App.vue作为根组件创建Vue应用，不带代码

// main.js
import { createApp } from 'vue';
import App from './App.vue'; // 根组件
import './style.css'; // CSS样式

const app = createApp(App);
app.mount('#app');

 

 子组件和父组件

就是我之前学的注册，在一个组件中能使用另一个组件，使用者是父亲，被使用者是儿子

1. 组件（Parent Component）：

   • 父组件相当于一个容器，它可以包含一个或多个子组件。
   • 在Vue的模板语法中，父组件可以使用子组件的标签，并将数据通过属性（props）传递给子组件。
   • 父组件也可以监听子组件发出的事件，并作出响应。

2. 子组件（Child Component）：

• 子组件可以接收来自父组件的数据（通过props）并使用这些数据。
• 子组件可以通过事件（$emit）与父组件通信，通常用于将信息或者通知发送回父组件。

 

通信

通信有两种方式

• defineProps 更适合于组件内部的props定义和接收，主要用于父子组件之间的数据传递。
• Pinia 提供了一种高效的方式来在整个应用范围内管理和共享状态，适用于复杂应用中跨组件或全局的状态管理。

defineProps

 

 

Pinia

 它提供了一种集中管理应用所有组件状态的方式，特别适用于大型应用。通过Pinia，Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态

类似的ros中的topic  将所有的数据都抛出去，谁想用根据id去拿

核心概念：

1. Store: 它是一个包含状态和操作的容器。它有点像一个永远存在的组件，每个组件都可以读取和写入它。

2. State: 是状态数据，它代表了应用程序的某个特定部分的数据。State 可以是响应式的，这意味着当 State 的值发生变化时，相关的组件会自动更新以反映这些变化。

3. Actions: 是用于操作状态数据的方法。通过定义 Actions，你可以实现一系列的操作，比如更新状态、异步请求数据等。Actions 可以被组件调用来执行特定的操作。

4. Getters: 类似于计算属性，它们允许你在 Store 中派生出一些基于状态的衍生数据。Getters 可以用来计算、过滤或组合状态数据，然后在组件中使用。

5. Mutations:  是 Store 中用于同步更新状态的方法。与 Actions 不同，Mutations 是同步执行的，用于处理一些简单的状态变更。

6. Plugins: 是 Pinia 提供的一种扩展机制，允许你扩展或修改 Store 的行为。你可以使用 Plugins 来添加中间件、持久化状态、跟踪状态变更等。

7. Devtools: 提供了一个开发者工具插件，可以在浏览器中调试 Pinia 应用程序。Devtools 允许你实时查看 Store 的状态、操作、Getters 等信息，并进行调试和性能分析。

 

Store

疑问的是：是怎么将数据放进去的，又是怎么取出来的，取出来的怎么使用？【多简单的概念，官网罗里吧嗦的介绍不明白，谁写的。】

1。定义store

　　就是一个单独的文件，用来定义数据和方法，在使用的时候，直接将对象实例化即可

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions
• 语法

• export const store的名字 = defineStore('它的id',function (){
      // 首先是共享数据
      const input_data = ref('');
      // 这个函数是操作数据，可以有接收值，调用的时候，传入数值
      function 函数名字(输入的值) {
          input_data.value = shuru;
        }
      //然后将数据和函数暴露出去，暴露到store外面
      return{
          input_data,
          loaddata
      }
  })
  

  　　

 2. 如何查看共享的数据

 

3. 

下面这三个是老一套的写法，我也不想学，就算了

State

Getter

Action