[vuejs] 理解和逻辑

2022年10月19日 优化 2022年11月2日 优化

Vue 架构图

一个标准的vuejs平台要跑起来的逻辑

vue的基础能力。组件功能和组件通信；状态、行为和生命周期

父子组件数据传递和交互

Vue Router 路由

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
app.mount('#app')
// 现在，应用已经启动了！

router-link
请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view
router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

Pinia 状态管理

Store是什么？

Store（如 Pinia）是一个保存状态和业务逻辑的实体，它并不与你的组件树绑定。换句话说，它承载着全局状态。它有点像一个永远存在的组件，每个组件都可以读取和写入它。它有三个概念，state、getters 和 actions，我们可以假设这些概念相当于组件中的 data、 computed 和 methods。

应该在什么时候使用 Store？

一个 Store 应该包含可以在整个应用程序中访问的数据。这包括在许多地方使用的数据，例如显示在导航栏中的用户信息，以及需要通过页面保存的数据，例如一个非常复杂的多步骤表单。
另一方面，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，一个元素在页面中的可见性。
并非所有的应用程序都需要访问全局状态，但如果你的应用程序确实需要一个全局状态，Pinia 将使你的开发更轻松。

创建一个 pinia 实例（根 store）并将其传递给应用程序：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

定义一个 Store：

import { defineStore } from 'pinia'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，
//     同时以 `use` 开头且以 `Store` 结尾。（比如 `useUserStore`，`useCartStore`，
//     `useProductStore`）
// 第一个参数是你的应用程序中 Store 的唯一 ID。
export const useStore = defineStore('main', {
  // 其他配置...
})
// Option 对象
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
// Setup 函数
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})
// ref() 就是 state 属性
// computed() 就是 getters
// function() 就是 actions

（完）