新手入门使用pinia

.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(37, 41, 51, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 5px }
.markdown-body h1 { font-size: 24px; line-height: 38px; margin-bottom: 5px }
.markdown-body h2 { font-size: 22px; line-height: 34px; padding-bottom: 12px; border-bottom: 1px solid rgba(236, 236, 236, 1) }
.markdown-body h3 { font-size: 20px; line-height: 28px }
.markdown-body h4 { font-size: 18px; line-height: 26px }
.markdown-body h5 { font-size: 17px; line-height: 24px }
.markdown-body h6 { font-size: 16px; line-height: 24px }
.markdown-body p { line-height: inherit; margin-top: 22px; margin-bottom: 22px }
.markdown-body img { max-width: 100% }
.markdown-body hr { border-top: 1px solid rgba(221, 221, 221, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(255, 245, 245, 1); color: rgba(255, 80, 44, 1); font-size: 0.87em; padding: 0.065em 0.4em }
.markdown-body code, .markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace }
.markdown-body pre { overflow: auto; position: relative; line-height: 1.75 }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { text-decoration: none; color: rgba(2, 105, 200, 1); border-bottom: 1px solid rgba(209, 233, 255, 1) }
.markdown-body a:active, .markdown-body a:hover { color: rgba(39, 91, 140, 1) }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(252, 252, 252, 1) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { color: rgba(102, 102, 102, 1); padding: 1px 23px; margin: 22px 0; border-left: 4px solid rgba(203, 203, 203, 1); background-color: rgba(248, 248, 248, 1) }
.markdown-body blockquote:after { display: block; content: "" }
.markdown-body blockquote>p { margin: 10px 0 }
.markdown-body ol, .markdown-body ul { padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
.markdown-body .contains-task-list { padding-left: 0 }
.markdown-body .task-list-item { list-style: none }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.markdown-body pre, .markdown-body pre>code.hljs { color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: 700 }
.hljs-literal, .hljs-number, .hljs-tag .hljs-attr, .hljs-template-variable, .hljs-variable { color: rgba(0, 128, 128, 1) }
.hljs-doctag, .hljs-string { color: rgba(221, 17, 68, 1) }
.hljs-section, .hljs-selector-id, .hljs-title { color: rgba(153, 0, 0, 1); font-weight: 700 }
.hljs-subst { font-weight: 400 }
.hljs-class .hljs-title, .hljs-type { color: rgba(68, 85, 136, 1); font-weight: 700 }
.hljs-attribute, .hljs-name, .hljs-tag { color: rgba(0, 0, 128, 1); font-weight: 400 }
.hljs-link, .hljs-regexp { color: rgba(0, 153, 38, 1) }
.hljs-bullet, .hljs-symbol { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: 700 }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }

什么是Pinia

Pinia本质上依然是一个状态管理的库，它允许你跨组件/页面进行状态共享

Pinia和Vuex的区别？

• 与Vuex相比，Pinia提供了一个更简单的API，具有更少的规范，提供了Composition-API风格的API。
• 最重要的是，在与TypeScript一起使用时具有可靠的类型推断支持

和Vuex相比，Pinia有什么优势？

• mutations不再存在，只有state，gettes，actions。

• 更友好的TypeScript支持。

• 不再有modules的嵌套结构，每个store都是独立的，互不影响。

• 没有命名空间模块。

• 无需动态添加 Store，默认情况下它们都是动态的。

• 不再需要注入、导入函数、调用函数。

• 支持插件来扩展自身功能。

• 支持服务端渲染（SSR）。

如何使用Pinia？

下载

yarn add pinia
或者
npm install pinia

挂载

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'virtual:windi.css'

import router from './router'

const app = createApp(App)
const pinia=createPinia()
app.use(ElementPlus)
app.use(router)
app.use(pinia)
app.mount('#app')

定义store

• 多个模块互相调用
• getter是相当于计算属性可以直接调用有缓存
• 还可以使用action是异步方法
• 可以使用this

    import { defineStore } from "pinia";
import  {useLoginStore}  from../index
    export const mainStore = defineStore('main', {
        state: () => {
            return {
                name: '礼拜',
                age: 18,
                count:90
            }
        },
        getters: {
            myCount(state) {
                return state.age + 1
            },
            changeName(state) {
                return state.name = '白居易'
            },
        },
        actions: {
                /**
             * 通过外界传来的 name，赋值给store中的name
             * 其中的this 也是 store 实例
             * @param name
             */
                setName(name: string){
                    this.name = name;
                },
                setAge(p: string){
                    this.age = p;
                    this.listTest =useLoginStore().list;
                }
        }
    })

变成响应式第一种方法 使用store

<template>

  {{ store.count }}
  <el-button @click="handlerAdd">点击</el-button>

</template>
  <script setup>
  import { mainStore } from "../../store";
const store = mainStore();
 const { name, age, myCount, changeName} =store

const handlerAdd = () => {

     store.count++  //只有这样使用就可以直接修改数据
}
  <script/>

变成响应式第二种方法使用storeToRefs

• 可以更改响应式

• 也可以使用$patch

• 还可以使用actio方法

<template>
{{count}}
  {{name}}
 {{ age }}
 <el-button @click="handlerAdd">点击</el-button>

</template>
 <script setup>
 import { mainStore } from "../../store";
  import {storeToRefs} from 'pinia'

  const store = mainStore();
  const { name, age, myCount, changeName} =storeToRefs(store)
 //使用这种解构赋值不可以在下面方法直接修改数据
const { name, age, myCount, changeName} =store

const handlerAdd = () => {
   // store.age++  //只有这样使用就可以直接修改数据
  //store.$patch({
   //count: 88,
 //  age: 10,
//    name: "白00易",
//  });
   store.setAge(66)
 store.setName('LIBAI')

}
 <script/>

变成响应式第三种方法

• 可以使用toRefs

<template>

{{ age }}
<el-button @click="handlerAdd">点击</el-button>

</template>
<script setup>
import { toRefs } from "vue";
import { mainStore } from "../../store";

const store = mainStore();
const { name, age, myCount, changeName} =toRefs(store)
//使用这种解构赋值不可以在下面方法直接修改数据
const { name, age, myCount, changeName} =store

const handlerAdd = () => {
  store.age++  //只有这样使用就可以直接修改数据
}
<script/>