{"id":724,"date":"2023-06-04T17:55:41","date_gmt":"2023-06-04T09:55:41","guid":{"rendered":"http:\/\/gjweb.top\/?p=724"},"modified":"2023-06-04T17:55:42","modified_gmt":"2023-06-04T09:55:42","slug":"15-pinia-%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=724","title":{"rendered":"15.pinia \u72b6\u6001\u7ba1\u7406"},"content":{"rendered":"\n

\u5b89\u88c5<\/h2>\n\n\n\n
yarn add pinia
# \u6216\u8005\u4f7f\u7528 npm
npm install pinia<\/code><\/pre>\n\n\n\n
\u4f7f\u7528<\/h2>\n\n\n\n
\u521b\u5efa store<\/h3>\n\n\n\n
\u65b0\u5efa store \/ index.ts<\/p>\n\n\n\n
import {defineStore} from \"pinia\"
export const useXxxStore = defineStore(\"TEST\",{
  state:()=>{
    return { \/\/ \u521d\u59cb\u5316\u72b6\u6001\u503c
      name:\"zhangsan\",
      age:18
    }
  },
  getters:{ \/\/ \u5728\u4e0d\u6539\u53d8\u6e90\u6570\u636e\u7684\u524d\u63d0\u4e0b\u53ef\u5bf9\u6570\u636e\u8fdb\u884c\u52a0\u5de5, \u7b49\u540c\u4e8e\u8ba1\u7b97\u5c5e\u6027
    asName(state){
      return state.name+\"\u6cf0\u5e93\u8fa3\"
    }
  },
  actions:{ \/\/ \u4fee\u6539 state \u4e2d\u7684\u503c,\u540c\u65f6\u652f\u6301\u540c\u6b65\u548c\u5f02\u6b65
    setName(){
      this.age++
    }
  }
})
\u200b<\/code><\/pre>\n\n\n\n
\u5728 pinia \u4e2d\u6bcf\u58f0\u660e\u4e00\u4e2astore\u76f8\u5f53\u4e8e\u4e00\u4e2a\u72ec\u7acb\u7684\u6a21\u5757<\/strong><\/p>\n\n\n\n
\n\n\n\n
\u5168\u5c40\u6ce8\u518cpinia<\/h3>\n\n\n\n
import {createPinia} from \"pinia\"
const store = createPinia();
app.use(store);<\/code><\/pre>\n\n\n\n
\n\n\n\n
\u4f7f\u7528 store \u4e2d\u7684\u6570\u636e<\/h3>\n\n\n\n
<template>
    <h1>{{xxx.name}} {{xxx.age}} {{xxx.asName}}<\/h1>
    <button @click=\"handelClick\">click<\/button>
<\/template>
<script setup lange=\"ts\">
import {useXxxStore} from \".\/store\/index.ts\"
const xxx = useXxxStore();
const handelClick = ()=>{
    xxx.setName();
}
<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u5b89\u88c5 \u4f7f\u7528 \u521b\u5efa store \u65b0\u5efa store \/ index.ts \u5728 pinia \u4e2d\u6bcf\u58f0\u660e\u4e00\u4e2astore\u76f8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[],"class_list":["post-724","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/724","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=724"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/724\/revisions"}],"predecessor-version":[{"id":725,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/724\/revisions\/725"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}