从零开始的web前端学习-Vue

目录

• 1初始化
• 2响应式数据与插值表达式
• 3计算属性
• 4侦听器
• 5指令
• 6组件通信
• 7组件插槽
• 8Vue Router
• 9Vuex
• 10vue3
• 11vue3状态管理-pinia

这篇文章仅仅是分享 Vue 的部分内容，并没有完整地对其进行学习总结，想要完整地学习 Vue，请移至：https://cn.vuejs.org/guide/essentials/template-syntax.html

1初始化

npm create vite@latest（npm 安装 vite，通过 vite 对 vue 项目进行构建）

在通过 vite 构建好 vue 项目文件夹后，输入命令行指令对 vue 项目进行初始化

也可以直接通过 npm create vue@latest 命令构建，vue 默认使用 vite 进行管理

当然，如果是简单的项目，vue 也支持 cdn 方式引入

2响应式数据与插值表达式

<!-- Basic.vue -->
<script>
    export default {
        data() {
            return {
                name: "Jack",
            }
        },
        methods: {
            output() {
                return `this student's name is Jack `
            }
        }
    }
</script>

<template>
    <p>{{ name }}</p>

    <p>{{ 1 + 2 + 3 + 4 }}</p>
    <p>{{ 1 > 2 ? "right" : "wrong" }}</p>
    
    <p>{{ output() }}</p>
</template>

vue 内置 data 方法可以通过 return 返回数据，methods 对象包含着需要定义的方法，插值表达式 {{ }}，可以将 data 方法的返回值进行渲染，也可以内部进行一些逻辑的运算并对结果进行呈现

3计算属性

计算属性与 methods 对象类似，都是方法的集合，但是计算属性具有缓存性，在响应式变量没有改变时，不会重复计算，而是输出缓存结果

<!-- Computed.vue -->
<script>
    export default {
        data() {
            return {
                number: 2,
            }
        },
        computed: {
            compare() {
                console.log('compare function run')
                return this.number > 4 ? `${this.number} is over 4` : `${this.number} is not over 4`
            }
        }
    }
</script>

<template>
    <p>{{ number }}</p>

    <p>{{ compare }}</p>
    <p>{{ compare }}</p>
</template>

注意，上述确实会生成两个具有相同内容的 p 标签，但是控制台输出仅有一次，即没有重复计算，并且，计算属性内部虽然写成函数形式，但是外部调用是不能加括号的

4侦听器

侦听器的主要功能是在响应式变量更新后，渲染页面的同时执行一些其它操作

<!-- Listener.vue -->
<script>
    export default {
        data() {
            return {
                isTrue: false
            }
        },
        methods: {
            change() {
                this.isTrue = true
            }
        },
        watch: {
            isTrue(newValue, oldValue) {
                console.log(`(new, old): (${newValue}, ${oldValue})`)
            }
        }
    }
</script>

<template>
    <p>{{ change() }}</p>
</template>

5指令

指令	说明
v-text	渲染文本，无法对标签进行渲染
v-html	可渲染标签
v-for	循环渲染
v-if	选择性渲染，不渲染时会被移除
v-show	选择性隐藏
v-bind	属性绑定响应式变量
v-on	事件绑定
v-model	绑定表单元素，实现双向数据绑定

<!-- Directives.vue -->
<script>
    export default {
        data() {
            return {
                text: "<span>text</span>",
                html: "<span>html</span>",
                name: "Jack",
                status: "pending",
                tasks: ["task one", "task two", "task three"],
                link: "https://cn.vuejs.org/guide/essentials/template-syntax.html",
                newTask: "",
                person: {
                    age: 18,
                    sex: "male",
                    isStudent: true
                }
            }
        },
        methods: {
            toggleStatus() {
                if (this.status === "active") {
                    this.status = "pending"
                } else if (this.status === "pending") {
                    this.status = "inactive"
                } else {
                    this.status = "active"
                }
            },
            addTask() {
                if (this.newTask.trim() !== "") {
                    this.tasks.push(this.newTask)
                    this.newTask = ""
                }
            },
            removeTask(index) {
                this.tasks.splice(index, 1)
            }
        }
    }
</script>

<template>
    <p v-text="text"></p>
    <p v-html="html"></p>

    <br>

    <p v-if="status === 'active'">{{ name }} is active</p>
    <p v-else-if="status === 'pending'">{{ name }} is pending</p>
    <p v-else>{{ name }} is inactive</p>

    <br>

    <p v-show="false">hidden content</p>

    <form @submit.prevent="addTask">
        <input type="text" name="newTask" id="newTask" placeholder="add task" v-model="newTask">
        <button type="submit">add task</button>
    </form>

    <br>

    <h2>cycle</h2>
    <p v-for="i in 5">{{ i }}</p>

    <br>

    <h2>list of tasks</h2>
    <ul>
        <li v-for="(task, index) in tasks" :key="index"><span>{{ task }}&nbsp;</span><button @click="removeTask(index)">x</button></li>
    </ul>

    <br>

    <h2>object cycle</h2>
    <p v-for="(item, key, index) in person">item: {{ item }}, key: {{ key }}, index: {{ index }}</p>

    <br>

    <a v-bind:href="link">go to vue documnet</a>
    <!-- <a :href="link">go to vue documnet</a>  -->

    <br>

    <button v-on:click="toggleStatus">change status</button>
    <!-- <button @click="toggleStatus">change status</button> -->
</template>

在 addTask 函数中，我们利用 JavaScript 中的 trim 函数实现空格的清除，实际上我们也可以在 v-model 后加入修饰符，如：v-model.trim，即可实现同样效果

6组件通信

1. 父传子
   vue 父传子组件通信与 react 类似，同样通过 props 机制进行数据传输

<!-- Comunication.vue -->
<script>
    export default {
        props: {
            name: String,
            age: {
                type: [Number, String],
                default: 18,
                // required: true, 
            },
            isStudent: Boolean
        }
    }
</script>

<template>
    <p>{{ name }} is {{ age }} years old, isStudent: {{ isStudent }}</p>
</template>

type 代表该数据的类型（可为多类型），default 为该数据默认值，required 代表该数据父组件必须传递

<!-- App.vue -->
<script>
  export default {
    components: {
      Communication
    }
  }

  import Communication from './components/Communication.vue';
</script>

<template>
  <h1>Vue Demo</h1>
  <Communication name="Jack" v-bind:is-student="parentIsStudent"/>
</template>

2. 子传父
   vue 子传父组件通信则需要通过自定义事件进行实现

<!-- Comunication.vue -->
<script>
    export default {
        data() {
            return {
                childCount: 0
            }
        },
        emits: ["childCountAdd"],
        methods: {
            addCount() {
                this.childCount++
                this.$emit("childCountAdd", this.childCount)
            }
        }
    }
</script>

<template>
    <button v-on:click="addCount">add</button>
</template>

注意，在 vue3 中需要先在 emits 中声明自定义函数

<!-- App.vue -->
<script>
  export default {
    data() {
      return {
        childData: 0
      }
    },
    methods: {
      getChildCount(childCount) {
        this.childData = childCount
      }
    },
    components: {
      Communication
    }
  }

  import Communication from './components/Communication.vue';
</script>

<template>
  <h1>Vue Demo</h1>
  <Communication @childCountAdd="getChildCount"/>
  <p>{{ childData }}</p>
</template>

7组件插槽

组件插槽，简单来说，就是标签内容，通过双标签实现差异化，不仅如此，插槽也可以实现父组件“调用”子组件变量

<!-- Slot.vue -->
<script>
    export default { 
        data() {
            return {
                count: 0
            }
        }
    }
</script>

<template>
    <br>
    <slot>default content</slot>
    <br>
    <slot name="footer">default footer</slot>
    <br>
    <slot name="dataOne" v-bind:count="count">data content one</slot>
    <br>
    <slot name="dataTwo" v-bind:count="count">data content two</slot>
    <br>
</template>

<!-- App.vue -->
<script>
  export default {
    data() {
      return {  }
    },
    methods: {  },
    components: {
      Slot
    }
  }

  import Slot from './components/Slot.vue';
</script>

<template>
  <h1>Vue Demo</h1>
  <Slot></Slot>
  <Slot>content one</Slot>
  <Slot>content two<template v-slot:footer>input footer two</template></Slot>
  <Slot>content three<template #dataOne="dataObj">{{ dataObj.count }}</template></Slot>
  <Slot>content three<template #dataTwo="{ count }">{{ count }}</template></Slot>
</template>

注意，父组件“调用”子组件变量，是因为变量本质是定义在子组件上，然后插槽的实质也是在子组件内部调用，然后该调用的返回值是一个对象，可以通过对象属性访问或者解构赋值的方式访问变量

8Vue Router

安装 vue-router 包：npm install vue-router@4，vite 项目构建默认已安装 vue-router 插件

在 src 文件夹下创建 views 文件夹，该文件夹主要存储页面文件

<!-- Home.vue -->
<script>
    export default {  }
</script>

<template>
    <h1>Home Page</h1>
    <p>This is home page.</p>
    <a href="./#/About">goto</a>
</template>

<!-- About.vue -->
<script>
    export default {  }
</script>

<template>
    <h1>About Page</h1>
    <p>This is about page.</p>
    <a href="./#/">goto</a>
</template>

在 src 文件夹下创建 router 文件夹，并创建 index.js 文件

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

注意：

属性	说明
path	实际 url 地址
name	逻辑 url 地址，映射实际地址
component	对应 url 地址显示组件

对于一些初始不用渲染的组件，我们可以使用懒加载进行优化，仅在使用时加载，如 About 组件，可以进行以下的懒加载优化

const About = () => import('@/views/About.vue')

以上，我们的简易 router 搭建完毕，然后我们需要引入 router

// src/main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

接着我们在 App.vue 中添加 <router-view></router-view> 标签即可显示页面内容，也可以加入类似 <router-link to="/about">About</router-link> 的 nav 链接组实现各页面切换

动态路由：简单来讲就是为 url 添加查询参数实现不同的页面内容

<!-- Number.vue -->
<script>
    export default {
        props : ['number']
    }
</script>

<template>
    <p>Number: {{ number }}</p>
</template>

{ path: '/number/:number', name: 'Number', component: Number, props: true }（/router/index.js 中 routes 对象添加路径信息）

<!-- App.vue -->
<script>
    export default {  }
</script>

<template>
  <nav>
    <router-link to="/number/2">Number2</router-link> |
    <router-link :to="{ name: 'Number', params: { number: 4 } }">Number4</router-link>
  </nav>
  <router-view></router-view>
</template>

注意，我们对于路径的设置存在两种方式，已在动态路由示例中演示

嵌套路由：简单来讲，即为原 url 路径添加子路径，与动态路由类似，但是嵌套路由是固定的不同路由，而动态路由则是根据某一查询参数变化而动态变化的路由

<!-- ProductComment.vue -->
<script>
    export default {  }
</script>

<template>
    <h1>Comment Page</h1>
    <p>This page provides comments of some products.</p>
</template>

<!-- Product.vue -->
<script>
    export default {  }
</script>

<template>
    <h1>Product Page</h1>
    <p>This is product page.</p>
    <nav>
        <router-link :to="{ name: 'product-comment'}">comment</router-link>
    </nav>
    <router-view></router-view>
</template>

{ path: '/product', name: 'Product', component: Product, children: [{ path: 'comment', name: 'product-comment', component: ProductComment }] }（/router/index.js 中 routes 对象添加路径信息）

<router-link to="/product">Product</router-link>（App.vue 中添加链接）

编程式导航：在某些情况下，实现自动跳转到某一路径

<!-- BackHome.vue -->
<script>
    export default {
        data() {
            return {
                timer: null
            }
        },
        created() {
            this.timer = setTimeout(() => {
                this.$router.push({ name: 'Home' })
            }, 3000)
        },
        beforeDestroy() {
            if (this.timer) {
                clearTimeout(this.timer)
            }
        }
    }
</script>

<template>
    <h1>Back Home Page</h1>
    <p>It will go home after 3 seconds.</p>
</template>

this.$router 能够指向 router 中设定的路由，上述代码实现 3 秒后跳转 home 页面

路由传参：各个 url 路径间传递数据

<!-- Deliver.vue -->
<script>
export default {
    data() {
        return {
            timer: null
        }
    },
    created() {
        this.timer = setTimeout(() => {
            this.$router.push({ name: 'product-comment', query: { comment: 'the product is good!' } })
        }, 3000)
    },
    beforeDestroy() {
        if (this.timer) {
            clearTimeout(this.timer)
        }
    }
}
</script>

<template>
    <p>It will send a good commnet after 3 seconds in console.</p>
</template>

<!-- Product.vue -->
<script>
export default {
    created() {
        console.log(this.$route.query)
    }
}
</script>

<template>
    <h1>Product Page</h1>
    <p>This is product page.</p>
    <nav>
        <router-link :to="{ name: 'product-comment' }">comment</router-link> |
        <router-link :to="{ name: 'back-home' }">back</router-link> |
        <router-link :to="{ name: 'deliver-comment' }">deliver</router-link>
    </nav>
    <router-view></router-view>
</template>

注意此处的 this.$route 与之前的 this.$router 不同，之前的 router 是对路由进行一些操作，而 route 则是对路由数据进行一些操作

上述代码在由 Deliver 页面跳转至 ProductComment 页面后，会在控制台输出一条评论信息

导航守卫：对所有导航做统一设置

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '@/views/Home.vue';

const About = () => import('@/views/About.vue')
const Number = () => import('@/views/Number.vue')
const Product = () => import('@/views/Product.vue')
const ProductComment = () => import('@/views/product/ProductComment.vue')
const BackHome = () => import('@/views/product/BackHome.vue')
const Deliver = () => import('@/views/product/Deliver.vue')

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/number/:number', name: 'Number', component: Number, props: true },
  { path: '/product', name: 'Product', component: Product, children: [{ path: 'comment', name: 'product-comment', component: ProductComment }, { path: 'back', name: 'back-home', component: BackHome }, { path: 'deliver', name: 'deliver-comment', component: Deliver}] }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  console.log('router run')
  next()
})

export default router

其中，router.beforeEach 是导航守卫函数之一，to 代表着前往路由，from 代表出发路由，next 代表切换路由函数，若不执行该函数，则页面不会相应更新

9Vuex

Vuex 是组件状态管理工具，安装 vuex 包：npm install vuex，vite 项目构建默认已安装 vuex 插件

在 src 文件夹下创建 store 文件夹，并创建 index.js 文件

// src/store/index.js
import { createStore } from "vuex";

const store = createStore({
    state() {},
    getters： {},
    mutations: {},
    actions： {},
    modules： {}
})

export default store

然后，需要导入 store

// src/main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

state：简单来讲，是全局数据存储，所有组件皆可使用 state 中的数据

// src/store/index.js
import { createStore } from "vuex";

const store = createStore({
    state() {
        return {
            isLogin: true
        }
    }
})

export default store

<!-- TestStore.vue -->
<script>
export default {
    data() {
        return {
            isLogin: this.$store.state.isLogin
        }
    }
}
</script>

<template>
    {{ isLogin }}
</template>

注意，通过 this.$store.state 访问 state 中的数据

实际上，可以直接通过赋值的方式修改 state 中的数据，但是这会破坏全局数据的一致性，所以并不建议这么做

通过 data 访问全局数据会更加规范，但是直接访问也是可行的

mutations：提供修改 state 中数据的途径

// src/store/index.js
import { createStore } from "vuex";

const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    mutations: {
        addCount(state, num) {
            state.count += num
        }
    }
})

export default store

<!-- TestStore.vue -->
<script>
export default {
    methods: {
        add() {
            this.$store.commit('addCount', 1)
        }
    }
}
</script>

<template>
    {{ this.$store.state.count }}
    <button v-on:click="add">add</button>
</template>

注意访问 mutations 方法的方式是 this.$store.commit 请求，而非 this.$store.mutations 属性，当然也可以直接使用 mutations 方法，但是通过 methods 方法的方式使用 mutations 方法会更加规范

actions：mutations 是同步操作，对于异步操作，只会记录最终结果，而 actions 可以理解为异步的 mutations，但是注意，修改依旧依赖于 mutations 方法，actions 仅仅是添加异步操作

// src/store/index.js
import { createStore } from "vuex";

const store = createStore({
    state() {
        return {
            count: 0,
            timer: null
        }
    },
    mutations: {
        addCount(state, num) {
            state.count += num
        },
        setDelayTimer(state, timer) {
            state.timer = timer
        },
        clearDelayTimer(state) {
            state.timer = null
        }
    },
    actions: {
        delayMinus(store, num) {
            if (store.state.timer) {
                clearTimeout(store.state.timer)
            }
            
            const timer = setTimeout(() => {
                store.commit('addCount', -num)
                store.commit('clearDelayTimer')
            }, 3000)
            
            store.commit('setDelayTimer', timer)
        }
    }
})

export default store

<!-- TestStore.vue -->
<script>
export default {
    methods: {
        delayMinus() {
            this.$store.dispatch('delayMinus', 1)
        }
    }
}
</script>

<template>
    {{ this.$store.state.count }}
    <button @click="delayMinus">delay minus</button>
</template>

上述代码实现延迟 3 秒减一操作，若不进行删除定时器操作，效果类似，但是定时器冗余，可能会降低执行效率

注意，优先同步操作，后异步操作

getters：可以理解为全局的计算属性

// src/store/index.js
import { createStore } from "vuex";

const store = createStore({
    state() {
        return {
            count: 0
        }
    },
    getters: {
        compare(state) {
            console.log('compare run')
            return state.count > -1
        }
    }
    modules() {}
})

export default store

<!-- TestStore.vue -->
<script>
export default {
    methods: {
        compare() {
            console.log(this.$store.getters.compare)
        }
    }
}
</script>

<template>
    <button @click="compare">compare</button>
</template>

modules：划分模块，各模块间不互相依赖，或者可以理解为封装，将针对某一部分用户的变量、方法等进行封装

// src/store/index.js
import { createStore } from "vuex";

const store = createStore({
    modules: {
        student: {
            state() {
                return {
                    id: '001'
                }
            },
            getters: {},
            mutations: {},
            actions: {}
        }
    }
})

export default store

对此的访问也需要稍微改变: this.$store.state.student.id

当然，你也可以真正将 modules 中的对象封装为单独的 JavaScript 文件

// src/store/module/worker.js
const worker = {
    state() {
        return {
            job: 'cleaner'
        }
    },
    getters: {},
    mutations: {},
    actions: {}
}

export default worker

// src/store/index.js
import { createStore } from "vuex";
import worker from "./module/worker";

const store = createStore({
    modules: {
        student: {
            state() {
                return {
                    id: '001'
                }
            },
            getters: {},
            mutations: {},
            actions: {}
        },
        worker: worker
    }
})

export default store

10vue3

vue3 是当前 vue 的默认版本，与 vue2 存在一些差别，但是大部分内容是相同的

vue 现在存在选项式与组合式两种代码风格，vue2 语法多为选项式，而 vue3 则提供一种新的写法，即组合式 API

选项式 API 会导致某一功能的代码较为分散，组合式 API 则能够将同一功能的实现集中起来，会更加类似于 JavaScript

在组合式 API 中，直接通过 const 或者 let 声明的变量都不是响应式的，对其进行修改并不能生效，需要通过相应的函数创建响应式数据

响应式数据-reactive：reactive 函数能够创建响应式数据，但是仅能创建对象、数组、映射、元组等对象类型数据

<!-- Reactive.vue -->
<script>
import { reactive } from 'vue';

export default {
    setup() {
        const numArray = reactive([1, 2, 3])

        function pushNumber() {
            numArray.push(4)
        }

        return {
            numArray,
            pushNumber
        }
    }
}
</script>

<template>
    <p>{{ numArray }}</p>
    <button @click="pushNumber">push</button>
</template>

在代码中，也能够看出组合式 API 的一种实现方式，即 setup 函数

reactive 函数创建的变量的各个维度都是响应式的，无论维度是深层次还是浅层次，如果不希望如此，可以使用 sallowReactive 函数，该函数仅仅会对数据的浅层次进行响应式处理

响应式数据-ref：ref 函数的使用范围会更加广泛，它对基本类型以及对象类型的数据都适用，但是 ref 创建的变量不能直接修改，而是应该对其 value 属性进行修改

<!-- Ref.vue -->
<script setup>
import { ref } from 'vue'

const name = ref("Jack")
const status = ref("active")
const tasks = ref(["task one", "task two", "task three"])

const toggleStatus = () => {
    if (status.value === "active") {
        status.value = "pending"
    } else if (status.value === "pending") {
        status.value = "inactive"
    } else {
        status.value = "active"
    }
}
</script>

<template>
    <p v-if="status === 'active'">{{ name }} is active</p>
    <p v-else-if="status === 'pending'">{{ name }} is pending</p>
    <p v-else>{{ name }} is inactive</p>

    <h2>list of tasks</h2>
    <ul>
        <li v-for="task in tasks" :key="task">{{ task }}</li>
    </ul>

    <button @click="toggleStatus">change status</button>
</template>

上述代码还给出组合式 API 实现的另一种方式，即 setup 属性，该方式并不需要 return 返回逻辑

只读数据-readonly：readonly 函数创建只读数据，该数据仅读不能进行写操作，所以是非响应式的

<!-- ReadOnly.vue -->
<script setup>
import { readonly } from 'vue';

const readData = readonly({
    name: 'Jack',
    age: 18,
    isStudent: true
})
</script>

<template>
    <p>{{ readData.name }} is {{ readData.age }} years old.</p>
    <p>Is he a student? <br> {{ readData.isStudent }}</p>
</template>

如果希望数据浅层次只读，数据深层次可写，则可以使用类似的 shallowReadonly 函数，该函数对于数据深层次是可写的，但是数据仍然是非响应式的，需要自己手动刷新查看变动

计算属性-computed：与选项是 API 的计算属性类似

<!-- ComputedFun.vue -->
<script setup>
import { computed, ref } from 'vue';

const content = ref('test')
const getLen = computed(() => {
    console.log('getLen run')
    return content.value.length
})
</script>

<template>
    {{ getLen }}
    {{ getLen }}
</template>

侦听器-watch：和组合式 API 类似，但是会存在一些特殊情况

<!-- Watch.vue -->
<script setup>
import { reactive, ref, watch } from 'vue';

const count = ref(0)
watch(count, (newValue, oldValue) => {
    console.log(oldValue, newValue)
})

function addCount() {
    count.value++
}

const student = reactive({
    name: 'Jack',
    age: 18,
    friends: ['Tom', 'Aily']
})
watch(() => student.age, (newValue, oldValue) => {
    console.log(oldValue, newValue)
})

function beOlder() {
    student.age++
}
</script>

<template>
    <p>{{ count }}</p>
    <button @click="addCount">add</button>
    <p>{{ student }}</p>
    <button @click="beOlder">old</button>
</template>

侦听器能够直接监听 reactive 和 ref 对象，但是对于对象类型的某一具体属性的监听，需要通过函数的形式实现

watchEffect：类似于 react 框架中的 useEffect，但是 watchEffect 会更加智能，会自动监听使用变量的值是否发生变化

<!-- WatchEffect.vue -->
<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0)
const judge = ref(true)

watchEffect(() => {
    console.log(`count: ${count.value}, judge: ${judge.value}`)
})

function addCount() {
    count.value++
}

function toggleJudge() {
    judge.value = !judge.value
}
</script>

<template>
    <p>{{ count }}</p>
    <button @click="addCount">add</button>

    <p>{{ judge }}</p>
    <button @click="toggleJudge">toggle</button>
</template>

11vue3状态管理-pinia

在项目构建时，如果没有勾选 pinia，需要通过 npm install pinia 安装并导入

// src/main.js
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

const pinia = createPinia()
app.use(pinia)

app.mount('#app')

然后，在 src/store 文件夹下创建 counter.js 文件

如果在构建时已经勾选 pinia，那么 counter.js 文件内容如下

// src/store/counter.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
    }
})

实际上，在 pinia 中进行状态管理，并没有特别之处，使用的基本语法与 vue3 中的语法几乎相同，ref 会被类比为 vuex 中的 state，computed 会被类比为 getters，pinia 没有 mutations 的概念，而 function 会被类比为 actions + mutations，最后在 pinia 中的模块概念实际就是该 JavaScript 文件，如 counter.js 文件，而 defineStore 就创建了 'counter' 这个模块

<!-- TestPinia.vue -->
<script setup>
import { useCounterStore } from '@/store/counter';
const counterStore = useCounterStore()
</script>

<template>
    <p>{{ counterStore.count }}</p>
    <p>{{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">add</button>
</template>