pinia 简介与简单使用

Pinia 是什么? Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案 Pinia 支持 Vue2 和 Vue3

常见问题 关于该项目和可能问题的几点说明：

问：这是否取代了Vuex，是它的继任者吗？

答：不，或者至少这不是主要意图

问：动态模块呢？

答：动态模块不是安全的类型，因此我们允许创建不同的商店，可以在任何地方导入

Pinia 优势 符合直觉，易于学习 极轻， 仅有 1 KB 模块化设计，便于拆分状态 安装 Pinia

yarn add pinia@next
# or with npm
npm install pinia@next

目录结构

-src
    store
         index.js

index.js //数据

import { createPinia } from 'pinia'
export const piniaStore = createPinia()

定义State

import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
export const tokenStore = defineStore('token', {
    state: () => ({
        token: '0' //定义的值
    })
})
export function ustokenStore() {
    return tokenStore(piniaStore)
}

页面获取 state定义值并使用

import { ustokenStore } from '@/store/modules/token'
const tokenStore = ustokenStore()
console.log(tokenStore.token, '取出数据')

修改 state

import { defineStore } from 'pinia'
import { piniaStore } from '@/store'
import {useUserStore} from "@/store/modules/user";
export const tokenStore = defineStore('token', {
    state: () => ({
        token: '初始值'
    }),
    getters: {
        doubleCount: state => state.counter * 2
    },
    actions: {
        updateName(token) {
            this.token = token
        }
    }
})
export function ustokenStore() {
    return tokenStore(piniaStore)
}

页面修改state定义值

import { ustokenStore } from '@/store/modules/token'
const tokenStore = ustokenStore()
tokenStore.updateName('修改的值')