• Vue3中的pinia使用，入门教程

    文章目录

    一、pinia原理？

    • 功能：管理全局共享数据，pinia与vuex功能一样
    • 优势：pinia相对于vuex增加了对ts的支持，对响应式的支持

    二、组成部分

    • State：存储共享的数据
    • Actions：可以包含任意异步操作，如axios，提交(dispatch)，action自动commit给mutation，保证所有数据同步更新，其他方法，会使部分数据失真
    • Mutations：pinia已取消，vuex中会有

    1. pinia使用流程:

    • 安装依赖，下载包

    npm install pinia

    • 在main.js中引入pinia并创建容器挂载到根实例上
    1. //引入stores暴露出的pinia的实例
    2. import pinia from './stores'
    3.  
    4. createApp(App).use(pinia).mount('#app')
    • 创建stores文件夹和index.js文件（这个文件以后基本不用管了）
    1. import { createPinia } from "pinia";
    2.  
    3. const pinia = createPinia()
    4.  
    5. export default pinia
    • 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）
    • defineStore 是需要传参数的：
    1. 第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.
    2. 第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。
    1. //定义关于counter的store
    2. import {defineStore} from 'pinia'
    3.  
    4. /*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
    5. 简单点说就可以理解成是一个命名空间.
    6. 第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
    7. 第二个是 getters，第三个是 actions。
    8. */
    9. const useCounter = defineStore("counter",{
    10.     state:() => ({
    11.         count:66,
    12.     }),
    13.     
    14.     getters: {
    15.  
    16.   	},
    17.  
    18.   	actions: {
    19.  
    20.   	}
    21. })
    22.  
    23. //暴露这个useCounter模块
    24. export default useCounter

    注意：返回的函数统一使用useXXX作为命名方案，这是约定的规定。

    • 然后再组件中使用：


     

    1.2.注意Store获取到后不能解构，否则失去响应式