十分钟带你了解Pinia,前端必备技能

这个是对于vue3发布之后，对于vuex的升级版

pinia介绍

下面是官网

Pinia | The intuitive store for Vue.js (vuejs.org)

他在官网中写到的特点：

  • 所见即所得
  • 类型安全
  • 开发工具支持
  • 可扩展性
  • 模块化设计
  • 极致轻量化

下面我们是用的是基于Vue3的Composition API 也就是组合式api

首先是初始化一个vue项目。这里用的是vue cli

1
npm init vue@latest

在使用pinia的时候

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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(createPinia())
app.use(router)

app.mount('#app')

可以看到是非常的方便

对比我们的vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {createStore} from 'vuex'

export default createStore({
    state: {
        member: {}
    },
    getters: {},
    mutations: {
        setMember(state, _member) {
            state.member = _member
        }
    },
    actions: {},
    modules: {

    }
})

可以看出来pinia是非常的方便的。

之后我们看他默认给我们生成的stores里面的东西

1
2
3
4
5
6
7
8
9
10
11
12
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中。会自动识别为状态管理。

比如说ref会识别成state的声明

function相当于actions

computed就相当于getters

他不仅把麻烦的地方去掉了，而且还简化了很多。

在pinia里面也是有这个模块的概念的。

defineStore后面的counter，就相当于定义了一个counter的模块

下面我们来说如何去引入

如何使用

在vue3后，需要用什么都是需要去引入的

1
2
3
4
5
<script setup>
import {useCounterStore} from "@/stores/counter";//做一个引入关联
const store = useCounterStore();

</script>

在组件中进行引入。

使用起来非常的方便。

其中count就是一个响应数据。doublecount也就是一个计算属性。increment就是一个操作的方式。

下面就是一个简单的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script setup>
import {useCounterStore} from "@/stores/counter";//做一个引入关联
const store = useCounterStore();

</script>


<template>
  <div class="about">
    <h1>count: {{store.count}} </h1>
    <h1>2*count:{{store.doubleCount}}</h1>
    <button @click="store.increment()">+1</button>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

image-20230905160327819