vue笔记（二）：vue router和pinia

首

vue router实现路由功能，是一种前端渲染方式。pinia用于组件间共享数据，替代之前的vuex功能，成为新的官方推荐。安装后，导入方式如下main.js:

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

vue router

实现两个view，/src/views/HomeView.vue:

/src/views/HomeView.vue:

配置路由信息/src/router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from "../views/AboutView.vue"

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
  ]
})

export default router

使用路由/src/App.vue:

路由需要特殊标签来代替标签，会将路由匹配的对应view显示出来。to属性除了给予路径之外，还可以根据/src/router/index.js中给路由配置的name名称进行对应：

pinia

定义store，/src/stores/counters.js:

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

defineStore第一个参数是store的ID，第二个参数可以是个选项式对象，也可以是个setup函数。setup store中，ref是state属性，computed是getters，function是actions，return用于返回想要暴露的参数。

可以在任意想要访问store的组件中使用：