pinia入门-学习笔记

Posted 2023-02-23 香菜+

在学习的过程中也看到了

1、pinia 是什么

官方地址：https://pinia.vuejs.org/zh/introduction.html

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态

如果你不懂vue可以不必看了，这个只是一个使用说明

2、安装pinia

官网看到的命令，直接用。

npm install pinia

3、配置pinia

import  createApp  from 'vue'
import  createPinia  from 'pinia'
import App from './App.vue'
//    这里使用pinia
const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

4、使用pinia

对于新手来说，不用搞清楚原理，先上手再说

1、创建store

store可以直接理解为一个map，保存了所有的数据，是全局唯一实例的，（反正我是这么理解的）

storeId 是key，保证全局唯一

import  defineStore  from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore("users", 
    state: () => 
        return 
            name: "香菜",
            sex: "男",
        ;
    ,
);

2、使用store

<template>
  <div>
    <p>name</p>
    <p>age</p>
    <p>sex</p>
    <button @click="changeName"> changeName</button>
  </div>
</template>

<script setup>
  import useUsersStore from "../api/user.ts";
  import storeToRefs from "pinia";
  import usePlayStore from "../api/player.ts";

  const  store = useUsersStore();
  const  playerStore = usePlayStore();
  const  name, age, sex  = storeToRefs(store);
  console.log(store)

  function changeName()
    store.age = 19;
  
</script>
这里有几个知识点

1> store在使用之前需要实例化，实例化多次也只有一个

2> 如果想使用响应在结构的时候需要使用 storeToRefs

3> store内置的函数$开头

4>批量修改可以使用$patch

5> chrome 可以查看实例化