安装准备

vite 的安装
1
npm init vite@latest my-vue3-project

upload successful
之后按照提示进行依赖的安装,并运行

upload successful
运行成功

安装 Less
1
npm install less less-loader --save-dev
安装 Axios
1
npm install axios
安装 Vue Router
1
npm install vue-router@next
安装 Pinia
1
npm install pinia

Pinia 使用

创建
1
2
3
4
// src/store/index.js
import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;

upload successful
##### 在main.js中导入使用

1
2
3
4
5
// main.js 或 main.ts	
import { createPinia } from 'pinia';
const pinia = createPinia();
app.use(pinia);

upload successful

创建相应的 js 文件

比如:

1
2
3
4
5
6
7
8
9
10
11
12
// src/stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
},
});

upload successful
##### 在相应的文件中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script setup>
import { reactive, toRefs } from 'vue';
import { useCounterStore } from './stores/counter';
const counterStore = useCounterStore();
const { count, increment } = toRefs(counterStore)
const state = reactive({
message: 'Hello Vue 3!',
count,
increment
})
const click = () => {
state.increment();
console.log(state.count);
}
</script>

<template>
<div>{{ state.message }}</div>
<h1>{{ state.count }}</h1>
<button @click="click()">Increment</button>
<input type="text" v-model="state.count">
</template>