【pinia】使用记录

pinia是什么？

全局状态管理器

pinia相较于vuex有哪些区别

1、体积 ，pinia只有1KB左右，相较于vuex体积小了不是一点点。
2、状态管理pinia没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据，而vuex的状态管理有state，mutation，getters，action
3、更好的支持ts

所以pinia很轻量，适合轻量级的应用。轻量级的小项目用pinia是完全没问题的。

使用方式

引入

npm install pinia@next
1

然后设置为全局对象，在main.js里面引用

import { createPinia } from "pinia" // 全局引入pinia管理数据状态
app.use(createPinia())
1
2

创建一个store管理状态

// store.js
import { defineStore } from "pinia"

// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const myStores = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "myStore",
  // state: 状态存储定义的地方，返回的是一个对象函数
  state: () => ({
    numOne: 1,
  }),
  getters: {}, //相当于computed，与vuex的getters一样的
  //action里面可以写同步也可以写异步，相较于vuex少了mutation，将mutation和action都合并成了action，所以修改state的方法都统一写在action里面了
  actions: {
    setnum(num) {
      this.numOne = num;
    },
  },
});

// 在vue3中使用
<template>
    <div>
        {{nums}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script>
//引入myStores 
import { myStores } from "@/store/store.js"
export default {
    setup(){
        let store = myStores ();
        //如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的)
        let nums= computed(()=>store.numOne)
        const clickHandle = () => {
            store.setnum("100")
        }
        return{nums,clickHandle}
    }
}
<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
36
37
38
39
40
41
42
43

vue3语法糖写法

就改装上面的

// store.js
import { defineStore } from "pinia"
import { ref } from "vue"
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const myStores = defineStore("myStore",() => {
	const numOne = ref(1)
	function setnum(num) {
      numOne.value = num;
    }
    return { numOne , setnum }
});

// 在vue3中使用
<template>
    <div>
        {{nums}}
        <button @click="clickHandle">按钮</button>
    </div>
</template>
<script setup>
//引入myStores 
import { computed } from "vue"
import { myStores } from "@/store/store.js"
let store = myStores ();
 //如果直接取state的值必须使用computed才能实现数据的响应式 如果直接取 store.state.a 则不会监听到数据的变化，或者使用getter，就可以不使用computed (这边和vuex是一样的)
let nums= computed(()=>store.numOne)
const clickHandle = () => {
     store.setnum("100")
}
<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

$patch修改数据

除了上述修改数据的方法 还可以直接修改，或者 $patch可以修改state数据

直接修改就是直接，这种方式太那啥了 不建议

store.numOne = "dsjak"
1

$patch修改

	let store = myStores ();
    // 第二种修改方式：使用$patch改变数据 $patch 可以同时修改多个值
    function changeDataByPatch() {
      /*
      $patch也有两种的调用方式
      * */
      // 第一种 $patch方法
      store.$patch({
         numOne: '6475d7a675da'
      })
 
      // 第二种 $patch方法
      store.$patch((state) => {
        state.numOne= '6475d7a675da'
      })
     }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果我们要修改的数据是数组的话，使用$patch的第二种方式比较赞，因为第一种方式需要将数据的所有数据传入进去，才能保证数组中的其他数据不会变化，如果使用$patch的第二修改方式就可以直接指定修改数组中的某一个数据。举个栗子

	  let store = myStores ();
	  // numOneList的原始数据：[1,2,3,4],我们将4修改成"cindy"
      // 第一种 $patch方法
      store.$patch({
         numOneList: [1,2,3,"cindy"]
      })
 
      // 第二种 $patch方法,对吧第二种看着就简单一点，哈哈哈哈
      store.$patch((state) => {
        state.numOneList[3] = "cindy"
      })

1
2
3
4
5
6
7
8
9
10
11
12

storeToRefs解构赋值，没有通过解构赋值的数据是不具有响应性的

我们可以通过storeToRefs 来进行解构赋值

import { storeToRefs } from "pinia"
import appStore from "@/store"
//aDevList 为我们定义的数据
const { aDevList } = storeToRefs(appStore.deviceStore)

1
2
3
4
5