Vue3 使用vite搭建Vue3项目、pinia的使用(笔记)

1. 使用vite安装Vue3项目

1.1 方式一，配置安装

// 使用 vite 安装项目，这里 init 不能改为 i，i 是 install 的简写
npm init vite

// 项目名称
? Project name: » vite-project

// 选择要使用的框架，我这里选的是 Vue
? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte

// 使用 js 还是 ts
? Select a variant: » - Use arrow-keys. Return to submit.
>   vue
    vue-ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.2 方式二，直接安装

npm init vite-app ProjectName
1

这两种安装方式都没有安装依赖包，需要进入文件 npm i 安装依赖包

2. Pinia 与 Vuex 的区别

• Pinia 是 Vue 的状态管理库，相当于 Vuex 取消了 mutations，取消了 Module 模块化命名空间
• 现在的 pinia 采用的是扁平化，每一块 store 都是一个命名空间
• 还支持了 plugins 等

3. pinia 安装与搭建

• 使用 npm 安装

  npm i pinia
  1

• 创建 store/index.js 文件

  import { defineStore } from "pinia"
  
  // defineStore(当前 store 的 Id, {配置项})
  export const countStore = defineStore("count", {
    // 状态
    state: () => {
      return {
        count: 1
      }
    },
    // 计算属性
    getters: {
      // 这里的计算属性使用时，为一个属性而不是方法
      increaseNum(store) {
        return store.count * 10
      }
    },
    // 方法
    actions: {
      addCount(value) {
        this.count += value
      }
    }
  })
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24

• 在 main.js 中引入

  // 这是 Vue3 的引入方式，Vue2 不太一样
  import { createApp } from "vue";
  import App from "./App.vue";
  import { createPinia } from "pinia";
  
  const app = createApp(App);
  app.use(createPinia());
  app.mount("#app");
  1
  2
  3
  4
  5
  6
  7
  8

这样就可以在任意位置引入 store 了

4. pinia 的使用

4.1 基本使用

<script setup>
import { countStore } from "../store/index.js";

// 可以直接通过 store. 去获取 state、getters、actions 中的属性和方法了
const store = countStore();
// 直接获取
store.count // 1

// 计算属性获取
store.increaseNum // 10

// 修改状态1
store.count += 1

// 修改状态2
store.addCount(1)

// 修改状态3，这种方式和 React 中的 setState 很像
store.$patch({
  count : store.count + 1
})

// 修改状态4
store.$patch((state) => {
  state.count += 1
})

// 替换状态(不是覆盖状态)，需要新的状态去替换旧的，如果 key 值不相同就是添加新状态
store.$state = {count: 2}

// 重置状态
store.$reset()

// 这个时候在使用其他组件引入 countStore 时，count 也是为最新的
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4.2 订阅状态

<script setup>
import { countStore } from "../store/index.js";

const store = countStore();

// store 中的值，每修改一次就会触发
store.$subscribe(({ events, storeId, type }, state) => {
  // 里面包含了一些信息
  events
   
  // 这个 store 的 Id，这里是 count
  storeId

  /*
	修改值的方式：
	  'direct'：直接修改、使用 action 中的方式修改
	  'patch object'：使用 $patch({}) 修改
	  'patch function'：使用 $patch((state)=>{}) 修改、使用 $state 替换、$reset()重置
  */
  type
});
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.3 订阅 actions

<script setup>
import { countStore } from "../store/index.js";

const store = countStore();

// action 中的函数每次调用，都会触发一次
store.$onAction(({ args, name, store, after, onError }) => {
  // 调用 actions 中函数的传参列表
  args

  // 函数名称
  name

  // store 对象
  store

  // 当函数正常执行完成后执行
  // result 接收函数返回成功状态的 Promise
  after((result) => {
    console.log(result);
  });

  // 当函数中存在失败状态的 Promise，或函数抛出异常时执行
  onError((err) => {
    console.log(err);
  });
});

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29