pinia入门-学习笔记

Posted 香菜+

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了pinia入门-学习笔记相关的知识,希望对你有一定的参考价值。

在学习的过程中也看到了

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 可以查看实例化

以上是关于pinia入门-学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 状态管理:Pinia 与 Vuex

Vue.js 状态管理:Pinia 与 Vuex

Vue.js 状态管理:Pinia 与 Vuex

vue.js入门基础的学习心得,体会,笔记

Vue学习笔记入门篇——组件的使用

vue使用pinia (vue2/vue3)