{"id":131,"date":"2019-11-17T15:32:12","date_gmt":"2022-11-17T07:32:12","guid":{"rendered":"http:\/\/blog.doorta.com\/?p=131"},"modified":"2022-11-17T15:32:12","modified_gmt":"2022-11-17T07:32:12","slug":"8%e3%80%81vue%e8%bf%9b%e9%98%b6%e4%b8%89","status":"publish","type":"post","link":"https:\/\/blog.doorta.com\/?p=131","title":{"rendered":"8\u3001Vue\u8fdb\u9636\u4e09"},"content":{"rendered":"
<\/div>\n

Vuex\u72b6\u6001\u7ba1\u7406<\/a>
Vuex\u5b89\u88c5<\/a>
state\u5c5e\u6027<\/a>
\u6a21\u7248\u5f15\u7528<\/a>
Options API\u4e2d\u4f7f\u7528<\/a>
Composition API\u4e2d\u4f7f\u7528<\/a>
getters\u5c5e\u6027<\/a>
getters\u6269\u5c55\u4e00<\/a>
getters\u6269\u5c55\u4e8c<\/a>
mutations\u5c5e\u6027<\/a>
actions\u5c5e\u6027<\/a>
\u7ec4\u4ef6\u4e2d\u5f15\u7528<\/a>
\u53c2\u6570\u4f20\u9012<\/a>
modules\u5c5e\u6027<\/a>
\u6a21\u7248\u4e2d\u5f15\u7528<\/a>
\u5176\u4ed6\u5c5e\u6027<\/a>
<\/a>
Pinia\u72b6\u6001\u7ba1\u7406<\/a>
Pinia\u76f8\u6bd4Vuex<\/a>
\u5b89\u88c5Pinia<\/a>
Pinia\u57fa\u672c\u4f7f\u7528<\/a>
\u5b9a\u4e49Store<\/a>
state\u5c5e\u6027<\/a>
\u6a21\u7248\u4e2d\u4f7f\u7528<\/a>
\u5bf9\u8c61\u89e3\u6784<\/a>
\u4fee\u6539\u6570\u636e<\/a>
\u6279\u91cf\u4fee\u6539<\/a>
\u66f4\u65b0store<\/a>
\u91cd\u7f6estore<\/a>
\u524d\u671f\u603b\u7ed3<\/a>
getters\u5c5e\u6027<\/a>
getters\u6269\u5c55\u4e00<\/a>
getters\u6269\u5c55\u4e8c<\/a>
getters\u6269\u5c55\u4e09<\/a>
actions\u5c5e\u6027<\/a>
\u53c2\u6570\u4f20\u9012<\/a><\/div>\n

TOC<\/a><\/p>\n

Vuex\u72b6\u6001\u7ba1\u7406<\/h3>\n
    Vuex\u662f\u4e00\u4e2aVue\u5b98\u65b9\u4e13\u95e8\u4e3aVue.js\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u7684\u72b6\u6001\u7ba1\u7406\u7a0b\u5e8f\uff0c\u5b83\u91c7\u7528\u96c6\u4e2d\u5f0f\u5b58\u50a8\u7ba1\u7406\u5e94\u7528\u7684\u6240\u6709\u7ec4\u4ef6\u7684\u72b6\u6001\uff0c\u5e76\u4ee5\u76f8\u5e94\u7684\u89c4\u5219\u4fdd\u8bc1\u72b6\u6001\u4ee5\u4e00\u79cd\u53ef\u9884\u6d4b\u7684\u65b9\u5f0f\u53d1\u751f\u53d8\u5316\uff0c\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4f20\u503c\u6709\u7236\u5b50\u7ec4\u4ef6\u901a\u8baf\u3001\u7956\u5148\u7ec4\u4ef6\u901a\u8baf\uff0c\u4f46\u662f\u8fd9\u79cd\u4f20\u53c2\u65b9\u5f0f\u5bf9\u4e8e\u591a\u5c42\u5d4c\u5957\u7684\u7ec4\u4ef6\u5c31\u663e\u5f97\u975e\u5e38\u7e41\u7410\uff0c\u4ee3\u7801\u7ef4\u62a4\u8d77\u6765\u975e\u5e38\u9ebb\u70e6\uff1b\n    \u56e0\u6b64Vue\u5b98\u65b9\u5c31\u63d0\u51fa\u4e86Vuex\uff0cVuex\u5c31\u662f\u628a\u7ec4\u4ef6\u5185\u9700\u8981\u8fdb\u884c\u5171\u4eab\u7684\u6570\u636e\u62bd\u53d6\u51fa\u6765\uff0c\u62bd\u53d6\u5230\u4e00\u4e2a\u72ec\u7acb\u7684\u4ed3\u5e93\uff0c\u8fdb\u884c\u7edf\u4e00\u7ba1\u7406\uff0c\u4ee5\u4e00\u4e2a\u5168\u5c40\u7684\u5355\u4f8b\u6a21\u5f0f\u4e2d\u7ba1\u7406\uff0c\u4efb\u4f55\u7ec4\u4ef6\u90fd\u53ef\u4ee5\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u5bf9\u8fd9\u4e2a\u4ed3\u5e93\u5185\u7684\u72b6\u6001\u8fdb\u884c\u589e\u5220\u6539\u67e5\uff0c\u8fd9\u5c31\u662fVuex\uff0c\u4e00\u4e2a\u5b9e\u73b0Vue\u4e0b\u9762\u5168\u5c40\u5171\u4eab\u72b6\u6001\u7684\u4ed3\u5e93\uff1b\n<\/code><\/pre>\n
Vuex\u5b89\u88c5<\/h4>\n
    \u5bf9\u4e8eVuex\u7684\u5b89\u88c5\u4e5f\u975e\u5e38\u7684\u7b80\u5355\uff0c\u76f4\u63a5\u5728\u9879\u76ee\u76ee\u5f55\u4e0b\u4f7f\u7528npm\u8fdb\u884c\u5b89\u88c5\u5373\u53ef\uff0c\u76ee\u524d\u7684\u7248\u672c\u4e3a4.1.0\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
[cce@doorta \/usr\/local\/Project\/front]# npm install vuex<\/code><\/pre>\n<\/div>\n
state\u5c5e\u6027<\/h4>\n
    \u5982\u679c\u5e0c\u671b\u5c06\u9700\u8981\u5728\u7ec4\u4ef6\u95f4\u5171\u4eab\u7684\u6570\u636e\u653e\u5728Vuex\u4e2d\uff0c\u9996\u5148\u5efa\u8bae\u5c06Vuex\u5b9e\u73b0\u7684\u72b6\u6001\u5171\u4eab\u529f\u80fd\uff0c\u5355\u72ec\u63d0\u53d6\u5230\u4e00\u4e2a\u6a21\u5757\u4e2d\uff0c\u8fd9\u6837\u66f4\u52a0\u5229\u4e8e\u4ee5\u540e\u7684\u7ba1\u7406\u548c\u7ef4\u62a4\uff1b\n    \u90a3\u4e48\u540c\u65f6\uff0c\u6211\u4eec\u60f3\u8981\u4f7f\u7528Vuex\uff0c\u9996\u5148\u5fc5\u987b\u5728Vuex\u5305\u4e2d\u5f15\u5165\u4e00\u4e2a\u540d\u4e3acreateStore\u7684\u51fd\u6570\uff0c\u5229\u7528\u8be5\u51fd\u6570\u6765\u521b\u5efa\u4e00\u4e2a\u4ed3\u5e93\uff0ccreateStore\u51fd\u6570\u63a5\u6536\u4e00\u4e2a\u53c2\u6570\uff0c\u8be5\u53c2\u6570\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u548cVue\u7ec4\u4ef6\u7684Options API\u6709\u70b9\u76f8\u4f3c\uff0c\u5b83\u5185\u90e8\u5fc5\u987b\u6709\u4e00\u4e2astate\u7684\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u5185\u5c31\u662f\u9700\u8981\u8fdb\u884c\u5168\u5c40\u5171\u4eab\u7684\u6570\u636e\uff0c\u548cOptions API\u7684data\u51fd\u6570\u5f88\u76f8\u4f3c\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
\/\/ store.js\nimport {createStore} from \"vuex\"\n\nconst store = createStore({\n    state() {\n        return {\n            name: \"cce\"\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
    \u90a3\u4e48\u56e0\u4e3a\u6211\u4eec\u5c06Vuex\u7684\u903b\u8f91\u5168\u90e8\u63d0\u53d6\u5230\u4e86\u4e00\u4e2a\u6a21\u5757\u4e2d\uff0c\u6240\u4ee5\u6211\u4eec\u5e94\u8be5\u5c06\u8fd9\u4e2acreateStore\u51fd\u6570\u521b\u5efa\u7684\u4ed3\u5e93\u66b4\u9732\u51fa\u53bb\uff0c\u7136\u540e\u5728Vue\u9879\u76ee\u4e2d\u53bb\u5bfc\u5165\u8fd9\u4e2a\u4ed3\u5e93\uff0c\u5e76\u5c06\u5176\u6ce8\u518c\u5230Vue\u9879\u76ee\u4e2d\uff0c\u90a3\u4e48\u5c06Vuex\u4ed3\u5e93\u6ce8\u518c\u5230Vue\u9879\u76ee\u4e2d\uff0c\u548c\u8def\u7531\u662f\u4e00\u6837\u7684\uff0c\u76f4\u63a5\u8c03\u7528Vue\u5b9e\u4f8b\u7684use\u65b9\u6cd5\u5373\u53ef\uff0c\u5e76Vuex\u4ed3\u5e93\u5bf9\u8c61\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u8fdb\u53bb\uff1b\n    \u540c\u6837\u7684\uff0c\u6ce8\u518c\u7684Vuex\u4ed3\u5e93\u5bf9\u8c61\uff0c\u5fc5\u987b\u5728Vue\u5b9e\u4f8bmount\u4e4b\u524d\u8fdb\u884c\u6ce8\u518c\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {createApp} from 'vue'\nimport App from '.\/App.vue'\nimport router from \".\/router.js\"\nimport store from \".\/store.js\"\n\nconst app = createApp(App)\napp.use(router)\napp.use(store)  \/\/ \u6ce8\u518cVuex\u4ed3\u5e93\napp.mount('#app')<\/code><\/pre>\n<\/div>\n
\u6a21\u7248\u5f15\u7528<\/h5>\n
    \u90a3\u4e48\u5c06Vuex\u4ed3\u5e93\u5bf9\u8c61\u6ce8\u518c\u5230Vue\u5b9e\u4f8b\u4e4b\u540e\uff0c\u5c31\u53ef\u4ee5\u5728\u5168\u5c40\u4f7f\u7528\u8fd9\u4e2a\u5171\u4eab\u4ed3\u5e93\u4e2d\u7684\u6570\u636e\u4e86\uff0c\u540c\u6837\u7684\uff0c\u8be5\u6570\u636e\u4e5f\u53ef\u4ee5\u5728\u6a21\u7248\u4e2d\u4f7f\u7528\u4f7f\u7528Mustache\u8bed\u6cd5\u6765\u5f15\u7528\uff0c\u90a3\u4e48\u4f7f\u7528Mustache\u8bed\u6cd5\u8fd9\u4e2a\u6807\u8bc6\u7b26\u5c31\u6709\u70b9\u8bb2\u7a76\u4e86\uff0c\u9700\u8981\u4f7f\u7528{{ $store.state.var_name }}\u5bf9\u8c61\u6765\u83b7\u53d6Vuex\u5bf9\u8c61\u4e2dstate\u51fd\u6570\u8fd4\u56de\u7684\u6570\u636e\uff0c\u548c\u8def\u7531\u5bf9\u8c61\u5728\u6a21\u7248\u4e2d\u5f15\u7528\u7684\u65b9\u5f0f\u662f\u4e00\u6837\u7684\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ $store.state.name }}<\/h1>  <!-- \u83b7\u53d6Vuex\u4ed3\u5e93\u5bf9\u8c61\u4e2d\u7684name\u5c5e\u6027 -->\n  <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n
<\/p>\n
Options API\u4e2d\u4f7f\u7528<\/h5>\n
    \u5982\u679c\u6211\u4eec\u5e0c\u671b\u5728Vue 2\u7684Options API\u4e2d\u4f7f\u7528\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528this\u5bf9\u8c61\u62ff\u5230\u8fd9\u4e2a$store\u5bf9\u8c61\uff0c\u6240\u4ee5\uff0c\u5728Options API\u4e2d\u4f7f\u7528\uff0c\u76f4\u63a5\u4f7f\u7528this.$store.var_name\u53bb\u83b7\u53d6Vuex\u4e2d\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ name }}<\/h1>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  data() {\n    return {\n      name: this.$store.state.name\n    }\n  }\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
Composition API\u4e2d\u4f7f\u7528<\/h5>\n
    \u5982\u679c\u6211\u4eec\u5e0c\u671b\u5728Vue 3\u7684Composition API\u5185\u7684Setup\u51fd\u6570\u4e2d\u4f7f\u7528\uff0c\u548crouter\u662f\u4e00\u6837\u7684\uff0cVuex\u5bf9\u8c61\u63d0\u4f9b\u4e86\u4e00\u4e2auseStore\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u7684\u8fd4\u56de\u503c\u5c31\u662f\u6211\u4eec\u5411Vue\u6ce8\u518c\u7684\u90a3\u4e2a\u4ed3\u5e93\uff0c\u6240\u4ee5\u5728Vue 3\u7684Setup\u51fd\u6570\u4e2d\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528useStore\u51fd\u6570\u7684\u8fd4\u56de\u503c\u76f4\u63a5\u62ff\u5230\u5df2\u6ce8\u518c\u7684Vuex\u4ed3\u5e93\u5bf9\u8c61\uff0c\u7136\u540e\u5229\u7528\u8fd9\u4e2a\u5bf9\u8c61\u6765\u8bbf\u95ee\u5171\u4eab\u4ed3\u5e93\u4e2d\u7684\u6570\u636e\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ name }}<\/h1>\n  <\/div>\n<\/template>\n\n<script setup>\nimport {useStore} from \"vuex\"\n\nconst store = useStore()\nlet name = store.state.name \/\/ \u62ff\u5230Vuex\u4e2d\u7684\u54cd\u5e94\u5f0f\u6570\u636e\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
getters\u5c5e\u6027<\/h4>\n
    \u5728Vuex\u7684\u5bf9\u8c61\u4e2d\uff0c\u8fd8\u6709\u4e00\u4e2agetters\u5c5e\u6027\uff0c\u5b83\u7c7b\u4f3ccomputed\u8ba1\u7b97\u5c5e\u6027\uff0c\u5176\u4e3b\u8981\u4f5c\u7528\uff0c\u5c31\u662f\u5f53\u6570\u636e\u9700\u8981\u5148\u8fdb\u884c\u8ba1\u7b97\u4e4b\u540e\u624d\u80fd\u4f9b\u7ec4\u4ef6\u4f7f\u7528\u65f6\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528getters\u6765\u5b9e\u73b0\uff0c\u5b83\u4e5f\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5185\u6709\u5f88\u591a\u8ba1\u7b97\u51fd\u6570\uff0c\u6bcf\u4e2a\u8ba1\u7b97\u51fd\u6570\u90fd\u6709\u4e24\u4e2a\u53c2\u6570\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3astate\uff0c\u8be5\u53c2\u6570\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7\u8fd9\u4e2astate\u5bf9\u8c61\uff0c\u6765\u83b7\u53d6\u5171\u4eab\u4ed3\u5e93\u4e2d\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u4e3agetters\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {createStore} from \"vuex\"\n\nconst store = createStore({\n    state() {\n        return {\n            num: 10\n        }\n    },\n    getters: {\n        get_num(state) {  \/\/ \u5b9a\u4e49\u8ba1\u7b97\u65b9\u6cd5\n            return state.num * 2\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
    \u90a3\u4e48\u5982\u679c\u6211\u4eec\u5e0c\u671b\u5728\u6a21\u7248\u4e2d\u3001Options API\u6216\u8005Composition API\u4e2d\u62ff\u5230\u8fd9\u4e2a\u901a\u8fc7\u8ba1\u7b97\u4e4b\u540e\u7684\u7ed3\u679c\u65f6\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u5728\u5df2\u6ce8\u518c\u7684store\u5bf9\u8c61\u4e2d\u7684getters\u5bf9\u8c61\u6765\u83b7\u53d6\u8fd9\u4e2agetters\u51fd\u6570\uff1b\n    \u4f46\u662f\uff0c\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\uff0c\u6211\u4eec\u5e76\u4e0d\u9700\u8981\u663e\u5f0f\u8c03\u7528\u8fd9\u4e2a\u8ba1\u7b97\u51fd\u6570\uff0cVue\u4f1a\u5728\u6e32\u67d3\u65f6\uff0c\u8fdb\u884c\u8c03\u7528\uff0c\u6240\u4ee5\uff0c\u6211\u4eec\u53ea\u9700\u8981\u63d0\u4f9b\u5bf9\u5e94getters\u51fd\u6570\u6807\u8bc6\u7b26\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ $store.getters.get_num }}<\/h1>\n  <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n
<\/p>\n
getters\u6269\u5c55\u4e00<\/h5>\n
    \u5176\u5b9egetters\u5c5e\u6027\u5185\u90e8\u7684\u8ba1\u7b97\u51fd\u6570\uff0c\u8fd8\u6709\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u5373getters\uff0c\u5982\u679c\u5728\u4e00\u4e2a\u8ba1\u7b97\u51fd\u6570\u5185\u9700\u8981\u7528\u5230\u53e6\u4e00\u4e2a\u8ba1\u7b97\u51fd\u6570\uff0c\u90a3\u4e48\u5c31\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528getters\u6765\u83b7\u53d6\u5176\u4ed6\u7684\u8ba1\u7b97\u51fd\u6570\uff0c\u4f46\u662f\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u548c\u4e0a\u8ff0\u4e00\u6837\uff0c\u5f00\u53d1\u8005\u65e0\u9700\u663e\u5f0f\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {createStore} from \"vuex\"\n\nconst store = createStore({\n    state() {\n        return {\n            num: 10\n        }\n    },\n    getters: {\n        get_num(state) {\n            return state.num * 2\n        },\n        get_n(state, getters) {\n            return getters.get_num * 2 \/\/ \u83b7\u53d6get_num\u8ba1\u7b97\u51fd\u6570\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
getters\u6269\u5c55\u4e8c<\/h5>\n
    \u5982\u679c\u5e0c\u671b\u7ed9getters\u8ba1\u7b97\u51fd\u6570\u4f20\u9012\u53c2\u6570\uff0c\u5b9e\u73b0\u6839\u636e\u53c2\u6570\u7684\u4e0d\u540c\u6267\u884c\u4e0d\u540c\u7684\u64cd\u4f5c\uff0c\u90a3\u4e48\u53ef\u4ee5\u5728getters\u5bf9\u8c61\u5185\u7684\u8ba1\u7b97\u51fd\u6570\u76f4\u63a5\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u90a3\u4e48\u5728\u6a21\u7248\u4e2d\uff0c\u6216\u8005Setup\u51fd\u6570\u4e2d\u7b49\uff0c\u8c03\u7528\u7684getters\u5c5e\u6027\u7684\u65f6\u5019\uff0c\u5c31\u9700\u8981\u53ef\u4ee5\u663e\u5f0f\u7684\u4f7f\u7528\u8c03\u7528\u51fd\u6570\u7684\u8bed\u6cd5\u6765\u8c03\u7528\u8be5\u8ba1\u7b97\u51fd\u6570\u8fd4\u56de\u7684\u8fd9\u4e2a\u51fd\u6570\uff0c\u4ece\u800c\u4e00\u4e9b\u52a8\u6001\u7684\u64cd\u4f5c\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
\/\/ store.js\nimport {createStore} from \"vuex\"\n\nconst store = createStore({\n    state() {\n        return {\n            num: 10\n        }\n    },\n    getters: {\n        get_num(state) {\n            return function (n) {  \/\/ \u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\n                return state.num * n\n            }\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
\n
<template>\n  <div>\n    <h1>{{ $store.getters.get_num(2) }}<\/h1>  <!-- \u663e\u5f0f\u8c03\u7528get_num\u8fd4\u56de\u7684\u51fd\u6570\uff0c\u5e76\u4f20\u5165\u4e00\u4e2a\u4e58\u6570 -->\n    <h1>{{ $store.getters.get_num(3) }}<\/h1>\n  <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n
<\/p>\n
mutations\u5c5e\u6027<\/h4>\n
    \u5982\u679c\u60f3\u8981\u4fee\u6539Vuex\u5171\u4eab\u4ed3\u5e93\u4e2d\u7684\u6570\u636e\uff0c\u867d\u7136\u901a\u8fc7\u6d4b\u8bd5\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u62ff\u5230\u7684state\u5bf9\u8c61\u4fee\u6539\uff0c\u4f46\u662fVue\u5b98\u65b9\u4e0d\u63a8\u8350\u8fd9\u6837\u4f7f\u7528\uff0c\u5982\u679c\u9700\u8981\u4fee\u6539Vuex\u4e2d\u7684\u6570\u636e\uff0c\u90a3\u4e48\u5b98\u65b9\u63a8\u8350\u7684\u65b9\u5f0f\uff0c\u5c31\u662f\u901a\u8fc7Vuex\u7684mutations\u5c5e\u6027\u6765\u5b9e\u73b0\uff0c\u56e0\u4e3aVuex\u662f\u4e00\u4e2a\u5355\u4f8b\u6a21\u5f0f\u7684\u7a0b\u5e8f\uff0c\u6240\u4ee5\u5b98\u65b9\u5f3a\u5236\u6027\u8981\u6c42\uff0c\u4fee\u6539\u6570\u636e\uff0c\u53ea\u80fd\u901a\u8fc7mutations\u5c5e\u6027\u6765\u5b9e\u73b0\uff0c\u8fd9\u4e5f\u662fVuex\u7684\u4e00\u4e2a\u89c4\u8303\uff1b\n    mutations\u5c5e\u6027\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u548cgetters\u7c7b\u4f3c\uff0c\u5185\u90e8\u662f\u4e00\u4e2a\u4e00\u4e2a\u7684\u65b9\u6cd5\uff0c\u8fd9\u4e9b\u65b9\u6cd5\u5c31\u662f\u7528\u6765\u5b9a\u4e49\u5982\u4f55\u53bb\u4fee\u6539\u5171\u4eab\u4ed3\u5e93\u4e2d\u6570\u636e\u7684\u4e00\u4e9b\u51fd\u6570\uff0c\u540c\u65f6\u8fd9\u4e9b\u51fd\u6570\u5728\u56de\u8c03\u65f6\uff0c\u9ed8\u8ba4\u4f1a\u4f20\u9012\u4e00\u4e2a\u53c2\u6570\uff0c\u5373state\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\uff0c\u5c31\u662fVuex\u5171\u4eab\u4ed3\u5e93\u7684state\u5bf9\u8c61\uff0c\u6240\u4ee5\uff0c\u5982\u679c\u9700\u8981\u4fee\u6539\u4ed3\u5e93\u4e2d\u7684\u6570\u636e\uff0c\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e2a\u5bf9\u8c61\u83b7\u53d6\u5230\u8981\u4fee\u6539\u7684\u5c5e\u6027\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {createStore} from \"vuex\"\n\nconst store = createStore({\n    state() {\n        return {\n            name: \"cce\"\n        }\n    },\n    mutations: {\n        edit_name(state) { \/\/ \u4fee\u6539\u4ed3\u5e93\u4e2d\u7684name\u5c5e\u6027\n            state.name = 'cfj'\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
    \u53ef\u4ee5\u770b\u5230\uff0c\u8fd9\u4e2amutations\u5c5e\u6027\u548c\u6211\u4eecOptions API\u4e2d\u7684methods\u5c5e\u6027\u6709\u70b9\u7c7b\u4f3c\uff0cmethods\u5c5e\u6027\u662f\u7528\u6765\u5b9a\u4e49\u4e00\u4e9b\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u7684\uff0c\u800cmutations\u5c5e\u6027\u5219\u662f\u7528\u6765\u5b9a\u4e49\u4fee\u6539Vuex\u4ed3\u5e93\u4e2d\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u4e00\u4e9b\u5904\u7406\u51fd\u6570\uff0c\u90a3\u4e48\u5904\u7406\u51fd\u6570\u5f53\u5b9a\u4e49\u597d\u4e86\u4e4b\u540e\uff0c\u5728\u7ec4\u4ef6\u4e2d\uff0c\u60f3\u8981\u4fee\u6539Vuex\u5171\u4eab\u4ed3\u5e93\u7684\u6570\u636e\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528\u8fd9\u4e2a\u5904\u7406\u51fd\u6570\u6765\u5b9e\u73b0\uff1b\n    \u90a3\u4e48\u8c03\u7528\u8fd9\u4e2a\u5904\u7406\u51fd\u6570\u4e5f\u6709\u70b9\u7279\u6b8a\uff0c\u9996\u5148\u6211\u4eec\u9700\u8981\u62ff\u5230\u5df2\u5411Vue\u6ce8\u518cstore\u5bf9\u8c61\uff0c\u7136\u540e\u4f7f\u7528store\u5bf9\u8c61\u7684commit\u65b9\u6cd5\u6765\u8c03\u7528\u5bf9\u5e94\u7684\u5904\u7406\u51fd\u6570\uff0c\u5177\u4f53\u8c03\u7528\u54ea\u4e00\u4e2a\u5904\u7406\u51fd\u6570\uff0c\u9700\u8981\u5c06\u5904\u7406\u51fd\u6570\u7684\u540d\u79f0\u4f5c\u4e3a\u53c2\u6570\u4f20\u5230commit\u65b9\u6cd5\u4e2d\uff0c\u5982\u4e0b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ $store.state.name }}<\/h1>\n    <button v-on:click=\"editName\">\u4fee\u6539<\/button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport {useStore} from 'vuex'\n\nconst state = useStore()\nlet editName = function () {\n  state.commit(\"edit_name\") \/\/ \u8c03\u7528edit_name\u51fd\u6570\n}\n<\/script><\/code><\/pre>\n<\/div>\n
    \u5f53\u7136\uff0c\u6211\u4eec\u5982\u679c\u5e0c\u671b\u7ed9\u8fd9\u4e2a\u5904\u7406\u51fd\u6570\u4f20\u9012\u53c2\u6570\uff0c\u53ea\u9700\u8981\u8bb0\u4f4f\u4e00\u4e2a\u539f\u5219\u5c31\u884c\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\uff0c\u5fc5\u987b\u662fstate\u5bf9\u8c61\uff0c\u5982\u679c\u9700\u8981\u5728\u5904\u7406\u51fd\u6570\u4e2d\u63a5\u6536\u989d\u5916\u7684\u53c2\u6570\uff0c\u90a3\u4e48\u5728\u9664\u4e86state\u53c2\u6570\u4e4b\u5916\uff0c\u518d\u5b9a\u4e49\u4e00\u4e2a\u5f62\u53c2\u5373\u53ef\uff0c\u90a3\u4e48\u5728\u8c03\u7528\u65f6\uff0c\u6211\u4eec\u53ea\u9700\u8981\u5728\u8c03\u7528commit\u65b9\u6cd5\u65f6\uff0c\u9664\u4e86\u4f20\u5165\u5904\u7406\u51fd\u6570\u7684\u540d\u79f0\u4e4b\u5916\uff0c\u5728\u4f20\u5165\u4e00\u4e2a\u5b9e\u53c2\u5373\u53ef\uff1b\n<\/code><\/pre>\n
actions\u5c5e\u6027<\/h4>\n
    \u5bf9\u4e8eVuex\u6765\u8bb2\uff0cstate\u5c5e\u6027\uff0c\u4e3b\u8981\u662f\u7528\u6765\u5b58\u653e\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u800cgetters\u5c5e\u6027\u5185\u90e8\u7684\u5904\u7406\u51fd\u6570\u4e3b\u8981\u662f\u7528\u6765\u505a\u8ba1\u7b97\u7684\uff0c\u8ba1\u7b97state\u4e2d\u7684\u6570\u636e\uff0c\u7136\u540e\u8fd4\u56de\u7ed9\u7ec4\u4ef6\u4f7f\u7528\uff0cmutations\u5c5e\u6027\u5185\u90e8\u7684\u5904\u7406\u51fd\u6570\u4e3b\u8981\u662f\u7528\u6765\u4fee\u6539state\u4e2d\u7684\u6570\u636e\u7684\uff0c\u90a3\u4e48\u5982\u679c\u6211\u4eec\u5e0c\u671b\u901a\u8fc7\u7f51\u7edc\u83b7\u53d6\u6570\u636e\uff0c\u7136\u540e\u5c06\u6570\u636e\u5b58\u653e\u5230state\u4e2d\u65f6\uff0c\u867d\u7136\u8fd9\u662f\u4e00\u79cd\u4fee\u6539\u6570\u636e\u7684\u64cd\u4f5c\uff0c\u4f46\u662f\u5e76\u4e0d\u63a8\u8350\u4f7f\u7528mutations\u6765\u5b9e\u73b0\uff1b\n    \u56e0\u4e3a\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\uff0c\u4f5c\u4e3a\u5f00\u53d1\u8005\u6765\u8bb2\u5e38\u5e38\u4f1a\u8ffd\u8e2a\u72b6\u6001\u7684\u53d8\u5316\uff0c\u5e38\u7528\u7684\u624b\u6bb5\u5c31\u662f\u5728\u6d4f\u89c8\u5668\u63a7\u5236\u53f0\u4e2d\u8c03\u8bd5\uff0c\u90a3\u4e48\u5982\u679c\u6211\u4eec\u4f7f\u7528mutations\u6765\u5b9e\u73b0\u5f02\u6b65\u66f4\u65b0\u72b6\u6001\uff0c\u867d\u7136\u4e5f\u4f1a\u4f7f\u72b6\u6001\u6b63\u5e38\u66f4\u65b0\uff0c\u4f46\u662f\u4f1a\u5bfc\u81f4\u5f00\u53d1\u8005\u5de5\u5177\u6709\u65f6\u65e0\u6cd5\u8ffd\u8e2a\u5230\u72b6\u6001\u7684\u53d8\u5316\uff0c\u8c03\u8bd5\u8d77\u6765\u5c31\u4f1a\u5f88\u56f0\u96be\uff0c\u6240\u4ee5\uff0c\u5982\u679c\u6211\u4eec\u901a\u8fc7mutations\u6765\u5b9e\u73b0\u5f02\u6b65\u66f4\u65b0\u72b6\u6001\uff0c\u6700\u5927\u7684\u95ee\u9898\u5c31\u662f\uff0c\u4f1a\u9020\u6210\u54cd\u5e94\u5f0f\u6570\u636e\u7684\u72b6\u6001\u5728\u6539\u53d8\u65f6\uff0c\u65e0\u6cd5\u8ddf\u8e2a\u72b6\u6001\u7684\u53d8\u5316\uff1b\n    \u90a3\u4e48\u5982\u679c\u60f3\u8981\u6267\u884c\u4e00\u4e9b\u5f02\u6b65\u64cd\u4f5c\uff0c\u6bd4\u5982\u7f51\u7edc\u8bf7\u6c42\uff0c\u5b98\u65b9\u63a8\u8350\u4f7f\u7528actions\u5c5e\u6027\u6765\u5b9e\u73b0\uff0cactions\u5c5e\u6027\u51fa\u73b0\u7684\u76ee\u5730\uff0c\u5c31\u662f\u4e3a\u4e86\u5904\u7406\u5f02\u6b65\u64cd\u4f5c\uff0c\u4f46\u662f\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5b98\u65b9\u660e\u786e\u6307\u660e\uff0c\u5982\u679c\u9700\u8981\u4fee\u6539state\u5c5e\u6027\u4e2d\u7684\u6570\u636e\uff0c\u5fc5\u987b\u4f7f\u7528mutations\u5c5e\u6027\u6765\u5b9e\u73b0\uff0c\u6240\u4ee5mutations\u662f\u4fee\u6539state\u6570\u636e\u7684\u552f\u4e00\u9014\u5f84\uff1b\n    \u56e0\u6b64\uff0c\u5728\u8fd9\u79cd\u573a\u666f\u4e0b\uff0c\u5f53\u6211\u4eec\u4f7f\u7528actions\u8fdb\u884c\u5f02\u6b65\u64cd\u4f5c\u5b8c\u6210\u4e4b\u540e\uff0c\u5982\u679c\u5e0c\u671b\u5c06\u8fd9\u4e2a\u8bf7\u6c42\u5230\u7684\u6570\u636e\u63d0\u4ea4\u5230Vuex\u4ed3\u5e93\u4e2d\uff0c\u8fd8\u662f\u9700\u8981\u501f\u52a9mutations\u6765\u5b9e\u73b0\uff0c\u5373\u5728actions\u91cc\u9762\u663e\u5f0f\u8c03\u7528mutations\uff1b\n    actions\u548cmutations\u5c5e\u6027\u662f\u4e00\u6837\u7684\uff0c\u5b83\u540c\u6837\u7684\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u5185\u90e8\u6709\u5f88\u591a\u7684\u5f02\u6b65\u5904\u7406\u51fd\u6570\uff0c\u540c\u65f6\u8fd9\u4e9b\u51fd\u6570\u5728\u56de\u8c03\u65f6\uff0c\u9ed8\u8ba4\u4f1a\u4f20\u5165\u4e00\u4e2acontext\u53c2\u6570\uff0c\u5373\u4e0a\u4e0b\u6587\uff0ccontext\u5bf9\u8c61\u548cstore\u5b9e\u4f8b\u5177\u6709\u76f8\u540c\u7684\u65b9\u6cd5\u548c\u5c5e\u6027\u7684\uff0c\u4f46\u662f\u5b83\u5e76\u975estore\u5b9e\u4f8b\uff0c\u6240\u4ee5\u5982\u679c\u5e0c\u671b\u5728actions\u4e2d\u8c03\u7528mutations\uff0c\u53ef\u4ee5\u76f4\u63a5\u8c03\u7528context\u5bf9\u8c61\u7684commit\u6765\u5b9e\u73b0\uff1b\n<\/code><\/pre>\n
\n
import {createStore} from \"vuex\"\n\nconst store = createStore({\n    state() {\n        return {\n            num: 10\n        }\n    },\n    mutations: {\n        edit_name(state, n) {\n            state.num *= n\n        }\n    },\n    actions: {\n        changgeNUM(context) {  \/\/ \u5b9a\u4e49\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570\n            setTimeout(function () { \/\/ \u57282\u79d2\u949f\u540e\u89e6\u53d1\u4e00\u6b21mutations\u6765\u4fee\u6539\u4ed3\u5e93\u4e2d\u7684num\u6570\u636e\n                context.commit(\"edit_name\", 3)\n            }, 2000)\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
\u7ec4\u4ef6\u4e2d\u5f15\u7528<\/h5>\n
    \u90a3\u4e48\u5982\u679c\u6211\u4eec\u5e0c\u671b\u5728\u7ec4\u4ef6\u7684Setup\u51fd\u6570\u4e2d\u89e6\u53d1\u8fd9\u4e2aactions\u5f02\u6b65\u51fd\u6570\u7684\u6267\u884c\uff0c\u548cmutations\u7684\u8c03\u7528\u65b9\u6cd5\u7c7b\u4f3c\uff0c\u9996\u5148\uff0c\u9700\u8981\u62ff\u5230store\u5bf9\u8c61\uff0c\u7136\u540e\u8c03\u7528\u8fd9\u4e2astore\u5bf9\u8c61\u7684dispatch\u65b9\u6cd5\uff0c\u5e76\u4f20\u5165\u5bf9\u5e94\u7684actions\u51fd\u6570\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ $store.state.num }}<\/h1>\n    <button v-on:click=\"changge\">\u4fee\u6539<\/button>\n  <\/div>\n<\/template>\n\n<script setup>\nimport {useStore} from \"vuex\"\n\nconst store = useStore() \/\/ \u62ff\u5230store\u5bf9\u8c61\nfunction changge() {\n  store.dispatch('changgeNUM') \/\/ \u89e6\u53d1\u540d\u4e3achanggeNUM\u7684actions\u51fd\u6570\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u53c2\u6570\u4f20\u9012<\/h5>\n
    \u5bf9\u4e8eactions\u7684\u53c2\u6570\u4f20\u9012\u548cmutations\u4e00\u6837\uff0c\u53ea\u8981\u7b2c\u4e00\u4e2a\u53c2\u6570\uff0c\u4e3a\u5bf9\u5e94actions\u5c5e\u6027\u4e2d\u7684\u51fd\u6570\u540d\u5373\u53ef\uff0c\u540e\u9762\u7684\u53c2\u6570\uff0c\u5c06\u4f9d\u6b21\u4f20\u9012\u7ed9actions\u5c5e\u6027\u5bf9\u5e94\u7684\u5904\u7406\u51fd\u6570\uff1b\n<\/code><\/pre>\n
modules\u5c5e\u6027<\/h4>\n
    \u5f53\u9879\u76ee\u53d8\u5f97\u8d8a\u6765\u8d8a\u5927\u65f6\uff0c\u7ec4\u4ef6\u4e5f\u4f1a\u968f\u4e4b\u589e\u591a\uff0c\u90a3\u4e48\u5f53\u7ec4\u4ef6\u589e\u591a\u65f6\uff0c\u6211\u4eec\u9700\u8981\u5171\u4eab\u7684\u6570\u636e\u4e5f\u4f1a\u968f\u4e4b\u53d8\u5f97\u8d8a\u6765\u8d8a\u591a\uff0c\u4e45\u800c\u4e45\u4e4b\uff0cVuex\u7684\u72b6\u6001\u7ba1\u7406\u5e93\u4f1a\u53d8\u5f97\u8d8a\u6765\u8d8a\u5e9e\u5927\uff0c\u4ee5\u81f3\u4e8e\u96be\u4ee5\u7ef4\u62a4\u7684\u5730\u6b65\uff0c\u56e0\u6b64\uff0cVuex\u63d0\u4f9b\u4e86\u4e00\u4e2amodules\u5c5e\u6027\uff1b\n    modules\u5c5e\u6027\uff0c\u53ef\u4ee5\u5c06\u4e00\u4e2a\u8f83\u5927\u7684\u5171\u4eab\u4ed3\u5e93\uff0c\u8fdb\u884c\u6a21\u5757\u5212\u5206\uff0c\u5c06\u4e00\u4e2a\u8f83\u5927\u7684Vuex\u5171\u4eab\u4ed3\u5e93\u4ee5\u6a21\u5757\u7684\u5f62\u5f0f\u8fdb\u884c\u62c6\u5206\uff0c\u6bcf\u4e2a\u6a21\u5757\u4e0b\uff0c\u90fd\u53ef\u4ee5\u6709\u81ea\u5df1\u7684state\u3001getters\u3001mutations\u3001actions\u5c5e\u6027\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {createStore} from \"vuex\"\n\nconst store = createStore({\n    modules: {\n        home: {\n            state() {\n                return {component_name: \"home\"}\n            }\n        },\n        user: {\n            state() {\n                return {component_name: \"user\"}\n            }\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
\u6a21\u7248\u4e2d\u5f15\u7528<\/h5>\n
    \u90a3\u4e48\u5f53\u6211\u4eec\u5c06Vuex\u4ed3\u5e93\u5bf9\u8c61\u8fdb\u884c\u6a21\u5757\u5212\u5206\u4e4b\u540e\uff0c\u6bcf\u4e2a\u6a21\u5757\u4e2d\u7684state\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u5728\u6a21\u7248\u4e2d\u5f15\u7528\u7684\u65b9\u5f0f\u4e5f\u6709\u4e00\u4e9b\u6539\u53d8\uff0c\u539f\u6765\u5f15\u7528\u7684\u65b9\u5f0f\u4e3a{{ $store.state.var_name }}\uff0c\u90a3\u4e48\u8fdb\u884c\u6a21\u5757\u5316\u5212\u5206\u4e4b\u540e\uff0c\u8bed\u6cd5\u5c31\u53d8\u6210\u4e86{{ $store.state.module_name.var_name }}\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ $store.state.home.component_name }}<\/h1>\n  <\/div>\n<\/template><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u5176\u4ed6\u5c5e\u6027<\/h5>\n
    \u4e0a\u8ff0\uff0c\u6211\u4eec\u53ea\u662f\u6f14\u793a\u4e86\u4e00\u4e2a\u57fa\u7840\u7684state\u5c5e\u6027\uff0c\u5728Vuex\u4e2d\u8fd8\u6709getters\u3001mutations\u53caactions\u8fd9\u4e09\u4e2a\u5c5e\u6027\uff0c\u5176\u5b9e\u8fd9\u4e09\u4e2a\u5c5e\u6027\u7684\u5b9a\u4e49\u53ca\u4f7f\u7528\u548c\u4e4b\u524d\u662f\u4e00\u6478\u4e00\u6837\u7684\uff0c\u56e0\u4e3aVuex\u9ed8\u8ba4\u4f1a\u5c06modules\u4e2d\u7684getters\u3001mutations\u53caactions\u5408\u5e76\u5230\u6839\u6a21\u5757(\u6240\u8c13\u6839\u6a21\u5757\u5c31\u662fVuex\u7684\u6839\u6a21\u5757)\u5f53\u4e2d\u7684\uff0c\u6240\u4ee5\u5bf9\u4e8e\u4f7f\u7528\u4e0a\u6765\u8bb2\u6ca1\u6709\u4efb\u4f55\u533a\u522b\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {createStore} from \"vuex\"\n\nconst store = createStore({\n    modules: {\n        home: {\n            state() {\n                return {\n                    num: 0\n                }\n            },\n            getters: {\n                get_num(state) {\n                    return state.num + 1\n                }\n            },\n            mutations: {\n                edit_num(state, n) {\n                    state.num += n\n                }\n            },\n            actions: {\n                edit_num_action(context) {\n                    setTimeout(() => {\n                        context.commit(\"edit_num\", 10)\n                    }, 2000)\n                }\n            }\n        }\n    }\n})\nexport default store<\/code><\/pre>\n<\/div>\n
\n
<template>\n  <div>\n    <h1>{{ $store.getters.get_num }}<\/h1>\n    <button v-on:click=\"edit\">\u4fee\u6539<\/button>\n  <\/div>\n<\/template>\n<script setup>\nimport {useStore} from \"vuex\"\n\nconst store = useStore()\n\nfunction edit() {\n  store.dispatch('edit_num_action', 10)\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/h2>\n
    \u53ef\u4ee5\u770b\u5230\uff0cVuex\u9ed8\u8ba4\u4f1a\u5c06\u5b50\u6a21\u5757\u4e2d\u7684getters\u3001mutations\u53caactions\u8fd9\u4e09\u4e2a\u5c5e\u6027\u5408\u5e76\u5230\u6839\u6a21\u5757\uff0c\u6240\u4ee5\u6211\u4eec\u5728\u4f7f\u7528\u7684\u65f6\u5019\uff0c\u548c\u6ca1\u6709\u4f7f\u7528\u6a21\u5757\u65f6\u662f\u4e00\u6478\u4e00\u6837\u7684\uff0c\u6240\u4ee5\u5728\u5f00\u53d1\u65f6\u5019\uff0c\u7279\u522b\u9700\u8981\u6ce8\u610f\uff0c\u8fd9\u4e9b\u5c5e\u6027\u4e2d\u7684\u5904\u7406\u65b9\u6cd5\uff0c\u4e0d\u8981\u51fa\u73b0\u91cd\u540d\u7684\u53ef\u80fd\uff0c\u5176\u5b9eVuex\u4e3a\u4e86\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff0c\u4e5f\u63d0\u51fa\u4e86\u4e00\u79cd\u89e3\u51b3\u65b9\u6848\uff0c\u5c31\u662f\u901a\u8fc7namespace\u6765\u5212\u5206\u6a21\u5757\uff0c\u8fd9\u6837\u6bcf\u4e2a\u6a21\u5757\u90fd\u72ec\u7acb\u8d77\u6765\uff0c\u8fd9\u6837\u5c31\u5b8c\u5168\u89e3\u51b3\u4e86\u91cd\u540d\u7684\u53ef\u80fd\uff0c\u4f46\u662f\u7531\u4e8e\u5176\u8bed\u6cd5\u5b9e\u5728\u592a\u8fc7\u4e8e\u4e11\u964b\uff0c\u56e0\u6b64\u5c31\u4e0d\u5728\u6b64\u6f14\u793a\u4e86\uff0c\u5177\u4f53\u8bf7\u67e5\u8be2\u5b98\u65b9\u6587\u6863\uff1b\n<\/code><\/pre>\n
Pinia\u72b6\u6001\u7ba1\u7406<\/h3>\n
    Pinia\u8d77\u6e90\u4e8e2019\u5e74\u7684\u4e00\u6b21\u63a2\u7d22Vuex\u4e0b\u4e00\u4e2a\u7248\u672c\u8fed\u4ee3\u7684\u5b9e\u9a8c\uff0c\u6240\u4ee5\uff0c\u5b83\u7ed3\u5408\u4e86Vuex 5\u6838\u5fc3\u56e2\u961f\u7684\u8bb8\u591a\u60f3\u6cd5\uff0c\u672c\u6765\u662f\u51c6\u5907\u5f00\u53d1Vuex 5\u7248\u672c\u7684\uff0c\u4f46\u662f\u7531\u4e8ePinia\u5df2\u7ecf\u5b9e\u73b0\u4e86Vuex 5\u7684\u5927\u90e8\u5206\u5185\u5bb9\uff0c\u6240\u4ee5\u6700\u7ec8\u51b3\u5b9a\u4f7f\u7528Pinia\u6765\u4ee3\u66ffVuex\uff0c\u6240\u4ee5\u4ece\u8fd9\u4e00\u6765\u770b\uff0c\u5176\u5b9ePinia\u5c31\u662fVuex 4.x\u7684\u4e00\u4e2a\u5347\u7ea7\u7248\uff0c\u53ea\u4e0d\u8fc7\u6362\u4e86\u4e2a\u540d\u79f0\u800c\u5df2\uff1b\n    Pinia\u672c\u8d28\u4f9d\u7136\u662f\u4e00\u4e2a\u72b6\u6001\u7ba1\u7406\u7684\u5e93\uff0c\u7528\u4e8e\u8de8\u7ec4\u4ef6\u3001\u9875\u9762\u8fdb\u884c\u72b6\u6001\u5171\u4eab\uff0c\u8fd9\u70b9\u548cVuex\u662f\u4e00\u6837\u7684\uff0c\u4f46\u4e0eVuex \u76f8\u6bd4\uff0cPinia\u4e0d\u4ec5\u63d0\u4f9b\u4e86\u4e00\u4e2a\u66f4\u7b80\u5355\u7684API\uff0c\u5e76\u4e14\u53bb\u9664\u4e86Vuex\u4e2d\u5f88\u591a\u7684\u9650\u5236\uff0c\u6bd4\u5982\uff0c\u4fee\u6539\u6570\u636e\u5fc5\u987b\u4f7f\u7528mutations\uff0c\u5f02\u6b65\u5904\u7406\u5fc5\u987b\u4f7f\u7528actions\u7b49\u7b49\uff1b\n    \u540c\u65f6Pinia\u8fd8\u63d0\u4f9b\u4e86\u66f4\u52a0\u7b26\u5408Composition API\u98ce\u683c\u7684API\uff0c\u5e76\u4e14\u540c\u65f6\u517c\u5bb9Vue 2.x\u548cVue 3.x\uff0c\u5728Vue 3.x\u4e2d\uff0c\u66f4\u52a0\u63a8\u8350\u4f7f\u7528Pinia\u6765\u8fdb\u884c\u72b6\u6001\u7ba1\u7406\uff1b\n<\/code><\/pre>\n
Pinia\u76f8\u6bd4Vuex<\/h4>\n
    \u5728Pinia\u4e2d\uff0c\u5df2\u7ecf\u53bb\u9664\u4e86mutations\u5c5e\u6027\uff0cmutations\u4f7f\u7528\u786e\u5b9e\u53d7\u5230\u4e0d\u5c11\u5f00\u53d1\u8005\u7684\u8bdf\u75c5\uff0c\u56e0\u6b64\u5728Pinia\u5c06\u5176\u4e0d\u518d\u8fdb\u884c\u652f\u6301\uff0c\u540c\u65f6\uff0c\u5728Pinia\u4e2d\u4e0d\u518d\u652f\u6301modules\uff0c\u6ca1\u6709\u6a21\u5757\u7684\u6982\u5ff5\uff0c\u53ef\u4ee5\u901a\u8fc7\u591a\u4e2astore\u6765\u5b9e\u73b0\u8fd9\u79cd\u7279\u6027\uff0c\u6bcf\u4e2astore\u76f8\u4e92\u72ec\u7acb\uff0c\u4e92\u4e0d\u5f71\u54cd\uff0c\u540c\u65f6\uff0c\u5728Pinia\u4e2d\uff0c\u4e5f\u4e0d\u518d\u652f\u6301namespace\u7684\u6982\u5ff5\uff0c\u4e0d\u9700\u8981\u8bb0\u4f4f\u5b83\u4eec\u4e4b\u95f4\u7684\u590d\u6742\u5173\u7cfb\uff1b\n    \u56e0\u6b64\uff0c\u5728Pinia\u4e2d\uff0c\u5c31\u4ec5\u652f\u6301\u4e09\u4e2a\u5c5e\u6027\uff0c\u5373state\u3001getters\u548cactions\uff1b\n<\/code><\/pre>\n
\u5b89\u88c5Pinia<\/h4>\n
    \u5bf9\u4e8ePinia\u7684\u5b89\u88c5\u4e5f\u975e\u5e38\u7684\u7b80\u5355\uff0c\u76f4\u63a5\u5728\u9879\u76ee\u76ee\u5f55\u4e0b\u4f7f\u7528npm\u8fdb\u884c\u5b89\u88c5\u5373\u53ef\uff0c\u76ee\u524d\u7684\u7248\u672c\u4e3a2.0.23\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
[cce@doorta \/usr\/local\/Project\/front]# npm install pinia<\/code><\/pre>\n<\/div>\n
Pinia\u57fa\u672c\u4f7f\u7528<\/h4>\n
    Pinia\u7684\u4f7f\u7528\u65b9\u5f0f\u548cVuex\u5927\u4e0d\u76f8\u540c\uff0c\u5f00\u53d1\u8005\u65e0\u9700\u5728\u521b\u5efaPinia\u5b9e\u4f8b\u65f6\uff0c\u76f4\u63a5\u5b9a\u4e49state\u3001getters\u548cactions\u5c5e\u6027\uff0c\u53ea\u9700\u8981\u5c06\u8fd9\u4e2aPinia\u5b9e\u4f8b\u6ce8\u518c\u5230Vue\u5b9e\u4f8b\u5f53\u4e2d\u5373\u53ef\uff0c\u5982\u4e0b\u5b9e\u4f8b\uff1b\n<\/code><\/pre>\n
\n
\/\/ pinia.js\nimport {createPinia} from \"pinia\"\nexport default createPinia()  \/\/ \u521b\u5efa\u4e00\u4e2aPinia\u5b9e\u4f8b\uff0c\u5e76\u66b4\u9732\u51fa\u53bb\n\n\/\/ main.js\nimport {createApp} from 'vue'\nimport App from '.\/App.vue'\nimport router from \".\/router.js\"\nimport pinia from \".\/stores\/pinia\";\n\nconst app = createApp(App)\napp.use(router)\napp.use(pinia)  \/\/ \u6ce8\u518cpinia\u5b9e\u4f8b\napp.mount('#app')<\/code><\/pre>\n<\/div>\n
    \u81f3\u6b64\uff0c\u6211\u4eec\u7684pinia\u5df2\u7ecf\u6b63\u5f0f\u6ce8\u518c\u5230Vue\u9879\u76ee\u4e2d\uff0c\u90a3\u4e48\u6211\u4eec\u60f3\u8981\u5b9a\u4e49\u54cd\u5e94\u5f0f\u6570\u636e\u548c\u65b9\u6cd5\uff0c\u6211\u4eec\u4e0d\u9700\u8981\u76f4\u63a5\u5728\u8fd9\u4e2apinia\u5b9e\u4f8b\u4e2d\u76f4\u63a5\u5b9a\u4e49\uff0c\u6211\u4eec\u53ef\u4ee5\u5355\u72ec\u7ed9\u4e00\u4e2a\u7ec4\u4ef6\u3001\u6216\u8005\u4e00\u79cd\u7c7b\u578b\uff0c\u4ee5\u6a21\u5757\u7684\u65b9\u5f0f\u5355\u72ec\u5b9a\u4e49\u4e00\u4e2astore\u4ed3\u5e93\uff0c\u4e14\u8fd9\u6837\u7684\u4ed3\u5e93\u53ef\u4ee5\u5b9a\u4e49\u65e0\u6570\u4e2a\uff0c\u5e76\u4e14\u8fd9\u4e9b\u4ed3\u5e93\u6211\u4eec\u4e5f\u65e0\u9700\u76f4\u63a5\u6ce8\u518c\u5230pinia\u5b9e\u4f8b\u4e2d\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u5728\u6a21\u7248\u4e2d\u3001Options API\u53caComposition API\u4e2d\u4f7f\u7528\uff1b\n<\/code><\/pre>\n
\u5b9a\u4e49Store<\/h4>\n
    \u90a3\u4e48\u60f3\u8981\u5b9a\u4e49store\u4ed3\u5e93\uff0c\u6211\u4eec\u5c31\u9700\u8981\u4ecepinia\u5305\u4e2d\u62ff\u5230\u4e00\u4e2adefineStore\u7684\u65b9\u6cd5\uff0c\u8be5\u65b9\u6cd5\u5c31\u662f\u7528\u6765\u5b9a\u4e49store\u4ed3\u5e93\u7684\uff0c\u8be5\u65b9\u6cd5\u63a5\u6536\u4e24\u4e2a\u53c2\u6570\uff1b\n    \u7b2c\u4e00\u4e2a\u53c2\u6570\u4e3a\u8be5Store\u4ed3\u5e93\u7684\u552f\u4e00\u6807\u8bc6\u7b26\uff0c\u5373\u4ed3\u5e93ID\uff0c\u56e0\u4e3a\u6211\u4eec\u5728\u5f00\u53d1\u4e2d\u4f1a\u5b9a\u4e49\u5f88\u591a\u7684Store\u4ed3\u5e93\uff0c\u6240\u4ee5\u6211\u4eec\u5fc5\u987b\u7ed9\u6bcf\u4e00\u4e2a\u4ed3\u5e93\u5b9a\u4e49\u4e00\u4e2a\u552f\u4e00\u7684\u6807\u8bc6\u7b26\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8fd9\u4e2a\u5bf9\u8c61\u5c31\u662f\u7528\u6765\u5b9a\u4e49\u6211\u4eec\u7684state\u3001getters\u53caactions\u7b49\u5c5e\u6027\u7684\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
\/\/ home.js\nimport {defineStore} from \"pinia\"\nexport default  defineStore(\"home\", {}) \/\/ \u5b9a\u4e49\u4e00\u4e2a\u540d\u4e3ahome\u7684Store\u4ed3\u5e93<\/code><\/pre>\n<\/div>\n
state\u5c5e\u6027<\/h4>\n
    \u90a3\u4e48\u5f53\u6211\u4eec\u7684Store\u4ed3\u5e93\u5b9a\u4e49\u597d\u4e86\u4e4b\u540e\uff0c\u6211\u4eec\u5c31\u53ef\u4ee5\u5728\u8fd9\u4e2a\u4ed3\u5e93\u5185\u5b9a\u4e49\u7c7b\u4f3cVuex\u7684state\u72b6\u6001\u4ed3\u5e93\u4e86\uff0cPinia\u4e2d\u7684state\u5c5e\u6027\u548cVuex\u7684state\u5c5e\u6027\u662f\u4e00\u6837\u7684\uff0c\u5b83\u4e5f\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u4e14\u8fd9\u4e2a\u51fd\u6570\u9700\u8981\u8fd4\u56de\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5185\u5c31\u662f\u9700\u8981\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
\/\/ home.js\nimport {defineStore} from \"pinia\"\n\nconst useHome = defineStore(\"home\", {\n    state() {  \/\/ \u5b9a\u4e49state\u72b6\u6001\u4ed3\u5e93\n        return {\n            component_name: \"home\"\n        }\n    }\n})\n\nexport default useHome<\/code><\/pre>\n<\/div>\n
\u6a21\u7248\u4e2d\u4f7f\u7528<\/h5>\n
    defineStore\u65b9\u6cd5\uff0c\u9ed8\u8ba4\u4f1a\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u7684\u8fd4\u56de\u503c\u5c31\u662f\u8fd9\u4e2a\u4f7f\u7528defineStore\u65b9\u6cd5\u5b9a\u4e49\u7684Store\u4ed3\u5e93\u5bf9\u8c61\uff0c\u540c\u65f6\uff0c\u8be5\u51fd\u6570\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u6211\u4eec\u4f1a\u4f7f\u7528use\u5f00\u5934\u6765\u547d\u540d\uff0c\u8fd9\u662f\u4e00\u79cd\u89c4\u8303\uff1b\n    \u90a3\u4e48\u5f53\u6211\u4eec\u5e0c\u671b\u5728\u6a21\u7248\u4e2d\u4f7f\u7528\u8fd9\u4e2a\u4ed3\u5e93\u4e2d\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u65f6\uff0c\u6211\u4eec\u5c31\u9700\u8981\u62ff\u5230\u8fd9\u4e2adefineStore\u65b9\u6cd5\u8fd4\u56de\u7684\u51fd\u6570\uff0c\u5e76\u8c03\u7528\u8be5\u51fd\u6570\u62ff\u5230\u5bf9\u5e94\u7684Store\u4ed3\u5e93\u5bf9\u8c61\uff1b\n    \u90a3\u4e48\u5982\u679c\u5e0c\u671b\u5229\u7528\u8fd9\u4e2astore\u5bf9\u8c61\uff0c\u5728\u6a21\u7248\u4e2d\u62ff\u5230\u8be5store\u4e2d\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u65f6\uff0c\u5c31\u4e0d\u518d\u50cfVuex\u4e2d\u90a3\u6837\u590d\u6742\u4e86\uff0c\u76f4\u63a5\u4f7f\u7528\u5bf9\u8c61\u7684\u5f62\u5f0f\uff0c\u5728store\u5bf9\u8c61\u5185\u53d6\u51fa\uff0cstate\u51fd\u6570\u8fd4\u56de\u7684\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.component_name }}<\/h1> <!-- \u76f4\u63a5\u901a\u8fc7\u5bf9\u8c61\u7684\u65b9\u5f0f\uff0c\u5728store\u4e2d\u62ff\u5230\u54cd\u5e94\u5f0f\u6570\u636e -->\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\" \/\/ \u5bfc\u5165defineStore\u65b9\u6cd5\u7684\u8fd4\u56de\u503c\nconst homeStore = useHome() \/\/ \u8c03\u7528defineStore\u65b9\u6cd5\u7684\u8fd4\u56de\u503c\uff0c\u62ff\u5230store\u5bf9\u8c61\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u5bf9\u8c61\u89e3\u6784<\/h5>\n
    \u53ef\u4ee5\u770b\u5230\uff0c\u6211\u4eec\u76f4\u63a5\u901a\u8fc7defineStore\u65b9\u6cd5\u8fd4\u56de\u7684\u51fd\u6570\u7684\u8fd4\u56de\u503c\u5c31\u53ef\u4ee5\u62ff\u5230store\u5bf9\u8c61\uff0c\u5728\u8fd9\u4e2a\u5bf9\u8c61\u5185\u5c31\u6709\u6211\u4eec\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u5373state\u51fd\u6570\u8fd4\u56de\u7684\u6570\u636e\uff0c\u4f46\u662f\u6211\u4eec\u9700\u8981\u77e5\u9053\u7684\u662f\uff0c\u867d\u7136\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5bf9\u8c61\u7684\u65b9\u5f0f\u62ff\u5230state\u51fd\u6570\u8fd4\u56de\u7684\u6570\u636e\uff0c\u4f46\u662f\u662f\u4e0d\u53ef\u4ee5\u76f4\u63a5\u5bf9\u5b83\u4f7f\u7528\u5bf9\u8c61\u89e3\u6784\u7684\u65b9\u6cd5\u53bb\u62ff\u5230\u7684\uff0c\u56e0\u4e3a\u8fd9\u6837\uff0c\u8fd9\u79cd\u65b9\u5f0f\u5bf9\u5171\u4eab\u6570\u636e\u7684\u64cd\u4f5c\uff0c\u4e0d\u652f\u6301\u54cd\u5e94\u5f0f\uff1b\n<\/code><\/pre>\n
\u4fee\u6539\u6570\u636e<\/h5>\n
    \u5982\u679c\u6211\u4eec\u7cfb\u7edf\u4fee\u6539state\u51fd\u6570\u8fd4\u56de\u7684\u5bf9\u8c61\u5185\u7684\u6570\u636e\u65f6\uff0c\u76f8\u6bd4Vuex\u7b80\u5355\u4e86\u592a\u591a\u592a\u591a\uff0c\u6211\u4eec\u76f4\u63a5\u4f7f\u7528store\u5bf9\u8c61\u5bf9\u5bf9\u5e94\u7684\u5c5e\u6027\u8fdb\u884c\u8d4b\u503c\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.component_name }}<\/h1>\n    <button v-on:click=\"changge\">\u4fee\u6539\u6570\u636e<\/button>\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\"\nconst homeStore = useHome()\nfunction changge() {\n  homeStore.component_name = \"homeComponent\"  \/\/ \u76f4\u63a5\u4f7f\u7528store\u5bf9\u8c61\u6765\u8fdb\u884c\u4fee\u6539\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u6279\u91cf\u4fee\u6539<\/h5>\n
    \u4e0a\u8ff0\u4fee\u6539state\u7684\u65b9\u5f0f\u662f\u4e00\u4e2a\u4e00\u4e2a\u7684\u4fee\u6539\uff0c\u5982\u679c\u6211\u4eec\u5e0c\u671b\u4e00\u6b21\u6027\u4fee\u6539\u591a\u4e2a\u5c5e\u6027\uff0cPinia\u5176\u5b9e\u4e5f\u7ed9\u6211\u4eec\u63d0\u4f9b\u4e86\u5bf9\u5e94\u7684\u65b9\u6cd5\uff0c\u6211\u4eec\u53ea\u9700\u8981\u8c03\u7528store\u5bf9\u8c61\u7684$patch\u65b9\u6cd5\u5373\u53ef\uff0c$patch\u6709\u4e00\u4e2a\u53c2\u6570\uff0c\u8be5\u53c2\u6570\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5185\u7684\u5c5e\u6027\u548c\u503c\uff0c\u5c31\u662f\u9700\u8981\u4fee\u6539\u7684\u5c5e\u6027\u548c\u503c\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.component_name }}<\/h1>\n    <button v-on:click=\"changge\">\u4fee\u6539\u4ed3\u5e93\u5185\u6570\u636e<\/button>\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\"\nconst homeStore = useHome()\nfunction changge() {  \/\/ \u4fee\u6539\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\n  homeStore.$patch({\n    component_name: \"homeComponent\"\n  })\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u66f4\u65b0store<\/h5>\n
    \u5982\u679c\u6211\u4eec\u5e0c\u671b\u66f4\u65b0store\u51fd\u6570\u8fd4\u56de\u7684\u5bf9\u8c61\uff0cPinia\u4e5f\u63d0\u4f9b\u4e86\u4e00\u79cd\u975e\u5e38\u4fbf\u6377\u7684\u65b9\u6cd5\uff0c\u5373\u8c03\u7528store\u5bf9\u8c61\u7684$state\u65b9\u6cd5\u5373\u53ef\uff0c\u8be5\u65b9\u6cd5\u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u63a5\u6536\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u4f1a\u76f4\u63a5\u8986\u76d6\u539f\u6709state\u51fd\u6570\u8fd4\u56de\u7684\u5171\u4eab\u54cd\u5e94\u5f0f\u5bf9\u8c61\uff1b\n    \u5f53\u6211\u4eec\u5c06\u4e2d\u5c5e\u6027\u8d4b\u503c\u4e3a\u4e00\u4e2a\u5bf9\u8c61\u65f6\uff0c\u4f1a\u76f4\u63a5\u8986\u76d6Store\u4e2d\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.component_name }}<\/h1>\n    <button v-on:click=\"changge\">\u4fee\u6539\u4ed3\u5e93\u5185\u6570\u636e<\/button>\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\"\n\nconst homeStore = useHome()\n\nfunction changge() {  \/\/ \u4fee\u6539\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\n  homeStore.$state = {\n    component_name: \"homeComponent\",\n    component_url: \"\/home\"\n  }\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u91cd\u7f6estore<\/h5>\n
    Pinia\u5185\u90e8\u6709\u4e2a\u673a\u5236\uff0c\u5b83\u4f1a\u8bb0\u5f55store\u6700\u521d\u7684\u72b6\u6001\uff0c\u5176\u4e3b\u8981\u7528\u9014\u5c31\u662f\u7528\u6765\u91cd\u7f6eStore\uff0c\u5728store\u5bf9\u8c61\u4e2d\uff0c\u8fd8\u63d0\u4f9b\u4e86\u4e00\u4e2a\u91cd\u7f6estore\u7684\u5c5e\u6027\uff0c\u5373$reset\uff0c\u5f53\u6211\u4eec\u8c03\u7528\u8fd9\u4e2a\u65b9\u6cd5\u65f6\uff0c\u9ed8\u8ba4\u4f1a\u5c06store\u6062\u590d\u6210\u6700\u521d\u7684\u5f62\u5f0f\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.component_name }}<\/h1>\n    <button v-on:click=\"changge\">\u4fee\u6539\u4ed3\u5e93\u5185\u6570\u636e<\/button>\n    <button v-on:click=\"resetStore\">\u91cd\u7f6e\u4ed3\u5e93<\/button>\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\"\nconst homeStore = useHome()\nfunction changge() {  \/\/ \u4fee\u6539\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\n  homeStore.component_name = \"homeComponent\"\n}\n\nfunction resetStore() {\n  homeStore.$reset()  \/\/ \u91cd\u7f6e\u5f53\u524dStore\u4ed3\u5e93\n}\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u524d\u671f\u603b\u7ed3<\/h4>\n
    \u5728\u5bf9Pinia\u505a\u4e86\u57fa\u672c\u4e86\u89e3\u4e4b\u540e\uff0c\u4f1a\u53d1\u73b0\uff0c\u5b83\u7684\u5b9a\u4e49\u548c\u4f7f\u7528\uff0c\u975e\u5e38\u7684\u7b80\u5355\uff0c\u76f8\u6bd4Vuex\u6765\u8bb2\uff0c\u590d\u6742\u7a0b\u5ea6\u964d\u4f4e\u4e86N\u4e2a\u7b49\u7ea7\uff0c\u5f3a\u5927\u7684\u6a21\u5757\u5316\u673a\u5236\uff0c\u8ba9\u6211\u4eec\u7684\u4ee3\u7801\u7f16\u6392\u65b9\u5f0f\u66f4\u52a0\u7684\u7075\u6d3b\uff1b\n    \u5176\u5b9e\u4e00\u4e2aStore\u5c31\u662f\u4e00\u4e2a\u5b9e\u4f53\uff0c\u5b83\u6709\u70b9\u50cf\u59cb\u7ec8\u5b58\u5728\uff0c\u5e76\u4e14\u4efb\u4f55\u5730\u65b9\u90fd\u53ef\u4ee5\u8bfb\u53d6\u548c\u5199\u5165\u7684\u4e00\u4e2a\u7ec4\u4ef6\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u7a0b\u5e8f\u4e2d\uff0c\u5b9a\u4e49\u4efb\u610f\u6570\u91cf\u7684Store\u6765\u7ba1\u7406\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff1b\n    Store\u6709\u4e09\u4e2a\u6838\u5fc3\u7684\u5c5e\u6027\uff0c\u5373state\u3001getters\u548cactions\uff0c\u4e00\u65e6store(defineStore\u65b9\u6cd5\u8fd4\u56de\u7684\u51fd\u6570\u7684\u8fd4\u56de\u503c)\u88ab\u5b9e\u4f8b\u5316\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e2a\u5b9e\u4f8b\u5316\u5bf9\u8c61\u6765\u8bbf\u95eestate\u3001getters\u548cactions\u4e2d\u5b9a\u4e49\u7684\u4efb\u4f55\u5c5e\u6027\uff1b\n<\/code><\/pre>\n
getters\u5c5e\u6027<\/h4>\n
    Pinia\u4e2d\u7684getters\u5c5e\u6027\u548cVuex\u4e2d\u7684getters\u5b9a\u4e49\u65b9\u6cd5\u4e00\u6478\u4e00\u6837\uff0c\u5b83\u4eec\u7684\u57fa\u7840\u7684\u6982\u5ff5\u4e5f\u662f\u4e00\u6478\u4e00\u6837\u7684\uff0c\u5c31\u662f\u5982\u679c\u6211\u4eec\u60f3\u8981\u5bf9\u67d0\u4e9b\u6570\u636e\u8fdb\u884c\u8ba1\u7b97\u4e4b\u540e\u63d0\u4f9b\u4f7f\u65f6\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528getters\u6765\u5b9e\u73b0\uff1b\n    \u540c\u6837\u7684\uff0cgetters\u4e5f\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5185\u6709\u4f17\u591a\u7684\u8ba1\u7b97\u51fd\u6570\uff0c\u6bcf\u4e2a\u8ba1\u7b97\u51fd\u6570\u9ed8\u8ba4\u5728\u56de\u8c03\u65f6\u90fd\u4f1a\u4f20\u9012\u4e00\u4e2astate\u7684\u53c2\u6570\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u8fd9\u4e2astate\u53c2\u6570\u6765\u83b7\u53d6\u5230state\u4e2d\u5171\u4eab\u7684\u54cd\u5e94\u5f0f\u6570\u636e\uff0c\u6b64\u5916\uff0c\u8be5\u51fd\u6570\u7684\u8fd4\u56de\u503c\u5c31\u662f\u8ba1\u7b97\u540e\u7684\u7ed3\u679c\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728\u6a21\u7248\u3001Options API\u548cComposition API\u4e2d\u4f7f\u7528\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {defineStore} from \"pinia\"\n\nconst useHome = defineStore(\"home\", {\n    state() {\n        return {\n            num: 10\n        }\n    },\n    getters: {\n        chenggeNum(state) {\n            return state.num * 2\n        }\n    }\n})\n\nexport default useHome<\/code><\/pre>\n<\/div>\n
    getters\u5c5e\u6027\u5185\u90e8\u7684\u8ba1\u7b97\u51fd\u6570\uff0c\u90fd\u4f1a\u76f4\u63a5\u7ed1\u5b9a\u5728store\u5bf9\u8c61\u4e0a\uff0c\u5982\u679c\u60f3\u8981\u5c06\u8fd9\u4e2agetters\u5185\u90e8\u7684\u51fd\u6570\u5728\u6a21\u7248\u3001Options API\u548cComposition API\u4e2d\u4f7f\u7528\uff0c\u76f4\u63a5\u4f7f\u7528store\u5bf9\u8c61\u6765\u8c03\u7528\u5373\u53ef\uff0c\u4f46\u662f\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u8fd9\u91cc\u5e76\u4e0d\u9700\u8981\u663e\u5f0f\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570\uff0c\u6211\u4eec\u76f4\u63a5\u4f7f\u7528\u5c5e\u6027\u7684\u65b9\u5f0f\u8bbf\u95ee\u5373\u53ef\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.chenggeNum }}<\/h1>\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\"\n\nconst homeStore = useHome()\n\nconsole.log(\"getters\u8ba1\u7b97\u65b9\u6cd5\u7ed3\u679c\u4e3a:\", homeStore.chenggeNum)\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
getters\u6269\u5c55\u4e00<\/h5>\n
    \u5982\u679c\u6211\u4eec\u5e0c\u671b\uff0c\u5728\u4e00\u4e2agetters\u51fd\u6570\u5185\u8c03\u7528\u53e6\u4e00\u4e2agetters\u51fd\u6570\u65f6\uff0c\u6211\u4eec\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528this\u5bf9\u8c61\u62ff\u5230\u5bf9\u5e94\u7684getters\u51fd\u6570\u51fd\u6570\uff0c\u5f53\u7136\uff0c\u5728\u4f7f\u7528\u65f6\uff0c\u6211\u4eec\u4e5f\u65e0\u9700\u663e\u5f0f\u8c03\u7528\u8fd9\u4e2agetters\u51fd\u6570\uff0c\u53ea\u9700\u8981\u4ee5\u5c5e\u6027\u7684\u65b9\u5f0f\u8bbf\u95ee\u5373\u53ef\uff0c\u8be6\u60c5\u67e5\u770b\u4e0a\u8ff0\u7684Vuex\u6269\u5c55\u4e00\uff1b\n<\/code><\/pre>\n
getters\u6269\u5c55\u4e8c<\/h5>\n
    \u5bf9\u4e8ePinia\u5f53\u4e2d\u7684getters\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\uff0c\u4e5fVuex\u5f53\u4e2d\u7684getters\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u662f\u4e00\u6837\u7684\uff0c\u5b83\u4e5f\u652f\u6301\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u5982\u679c\u6211\u4eec\u5e0c\u671b\u7ed9getters\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u4f20\u53c2\uff0c\u90a3\u4e48\u76f4\u63a5\u5c06\u8fd9\u4e2agetters\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u8fd4\u56de\u4e00\u4e2a\u5e26\u53c2\u7684\u51fd\u6570\u5373\u53ef\uff0c\u8be6\u60c5\u67e5\u770b\u4e0a\u8ff0\u7684Vuex\u6269\u5c55\u4e8c\uff1b\n<\/code><\/pre>\n
getters\u6269\u5c55\u4e09<\/h5>\n
    \u5982\u679cgetters\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u9700\u8981\u7528\u5230\u522b\u7684store\u5f53\u4e2d\u7684\u6570\u636e\u6216\u8005\u65b9\u6cd5\u65f6\uff0c\u4e00\u6837\u7684\uff0c\u6211\u4eec\u53ea\u9700\u8981\u5bfc\u5165defineStore\u65b9\u6cd5\u8fd4\u56de\u7684\u51fd\u6570\u5bf9\u8c61\uff0c\u7136\u540e\u62ff\u5230\u8fd9\u4e2a\u51fd\u6570\u7684\u8fd4\u56de\u503c\u53bb\u8bbf\u95ee\u5373\u53ef\uff0c\u5177\u4f53\u7684\u4e0d\u505a\u8fc7\u591a\u7684\u8d58\u8ff0\uff0c\u5f88\u7b80\u5355\uff1b\n<\/code><\/pre>\n
actions\u5c5e\u6027<\/h4>\n
    \u5bf9\u4e8ePinia\u6765\u8bb2\uff0c\u5b83actions\u5c5e\u6027\u548cVuex\u5f53\u4e2d\u7684actions\u5c5e\u6027\u7684\u5b9a\u4e49\u65b9\u5f0f\u662f\u4e00\u6837\u7684\uff0c\u90fd\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5bf9\u8c61\u5185\u6709\u4f17\u591a\u7684\u5f02\u6b65\u65b9\u6cd5\u51fd\u6570\uff0c\u552f\u4e00\u548cVuex\u4e0d\u540c\u7684\u662f\uff0cPinia\u5f53\u4e2d\u7684actions\u51fd\u6570\uff0c\u5728\u56de\u8c03\u65f6\uff0c\u4e0d\u4f1a\u4f20\u9012\u4efb\u4f55\u53c2\u6570\uff1b\n    \u6b64\u5916\uff0cPinia\u5f53\u4e2d\u7684actions\u5185\u90e8\u7684\u65b9\u6cd5\u51fd\u6570\u90fd\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7this\u5bf9\u8c61\u6765\u8bbf\u95ee\u5230getters\u548cstate\u5bf9\u8c61\u5185\u7684\u6cd5\u548c\u5c5e\u6027\uff0c\u4f46\u662f\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0cthis\u662f\u4f1a\u6709\u7ed1\u5b9a\u95ee\u9898\u7684\uff0c\u6240\u4ee5\u5728\u8fd9\u79cd\u573a\u666f\u4e0b\uff0c\u5982\u679c\u6211\u4eec\u7f16\u5199\u4e00\u4e2a\u4f20\u7edf\u7684action\u51fd\u6570\uff0c\u90a3\u4e48this\u5c31\u4f1a\u7ed1\u5b9a\u5230Window\u5bf9\u8c61\uff0c\u6240\u4ee5\u5728actions\u5c5e\u6027\u5185\u7684\u5f02\u6b65\u65b9\u6cd5\uff0c\u6211\u4eec\u5efa\u8bae\u76f4\u63a5\u4f7f\u7528\u7bad\u5934\u51fd\u6570\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
import {defineStore} from \"pinia\"\n\nconst useHome = defineStore(\"home\", {\n    state() {\n        return {\n            num: 10\n        }\n    },\n    actions: {\n        chenggeNum() {\n            setTimeout(() => {\n                this.num *= 2\n            }, 2000)\n        }\n    }\n})\n\nexport default useHome<\/code><\/pre>\n<\/div>\n
    \u90a3\u4e48\u5982\u679c\uff0c\u6211\u4eec\u5e0c\u671b\u5728\u6a21\u7248\u4e2d\u3001Options API\u548cComposition API\u4e2d\u8c03\u7528actions\u5c5e\u6027\u5185\u90e8\u7684\u65b9\u6cd5\u51fd\u6570\uff0c\u5176\u5b9e\u5b83\u548cPinia\u7684getters\u662f\u4e00\u6837\u7684\uff0c\u76f4\u63a5\u4f7f\u7528store\u5bf9\u8c61\u6765\u8c03\u7528\u5373\u53ef\uff0c\u53ea\u4e0d\u8fc7\u5bf9\u4e8eactions\u6765\u8bb2\uff0c\u6211\u4eec\u4e0d\u518d\u50cfgetters\u90a3\u6837\uff0c\u4f7f\u7528\u5c5e\u6027\u7684\u65b9\u5f0f\u6765\u8c03\u7528\uff0c\u800c\u662f\u4f7f\u7528\u65b9\u6cd5\u7684\u65b9\u5f0f\u6765\u8c03\u7528\uff0c\u5982\u4e0b\u793a\u4f8b\uff1b\n<\/code><\/pre>\n
\n
<template>\n  <div>\n    <h1>{{ homeStore.num }}<\/h1>\n    <button v-on:click=\"homeStore.chenggeNum()\">\u5f02\u6b65\u5904\u7406<\/button> <!-- \u4f7f\u7528store\u5bf9\u8c61\u6765\uff0c\u8c03\u7528actions\u51fd\u6570 -->\n  <\/div>\n<\/template>\n<script setup>\nimport useHome from \"..\/stores\/home\"\n\nconst homeStore = useHome()\n<\/script><\/code><\/pre>\n<\/div>\n
<\/p>\n
\u53c2\u6570\u4f20\u9012<\/h5>\n
    \u56e0\u4e3aPinia\u5f53\u4e2d\u7684actions\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\uff0c\u548cVuex\u5f53\u4e2d\u7684actions\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u662f\u4e0d\u4e00\u6837\u7684\uff0cVuex\u5f53\u4e2d\u7684actions\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u5728\u56de\u8c03\u65f6\u9ed8\u8ba4\u4f1a\u4f20\u9012\u4e00\u4e2acontext\u53c2\u6570\uff0c\u800cPinia\u5f53\u4e2d\u7684actions\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u5219\u4e0d\u4e00\u6837\uff0c\u5b83\u5728\u56de\u8c03\u65f6\uff0c\u4e0d\u4f1a\u4f20\u9012\u4efb\u4f55\u53c2\u6570\uff1b\n    \u6240\u4ee5\uff0c\u5982\u679c\u6211\u4eec\u5e0c\u671b\u5728Pinia\u5f53\u4e2d\u7684actions\u5c5e\u6027\u5185\u90e8\u7684\u51fd\u6570\u5b9a\u4e49\u53c2\u6570\uff0c\u76f4\u63a5\u5b9a\u4e49\u5f62\u53c2\u5373\u53ef\uff0c\u7136\u540e\u5728\u8c03\u7528\u65f6\uff0c\u663e\u5f0f\u7684\u4f20\u9012\u4e00\u4e2a\u5b9e\u53c2\uff1b\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Vuex\u72b6\u6001\u7ba1\u7406Vuex\u5b89\u88c5state\u5c5e\u6027\u6a21\u7248\u5f15\u7528Options API\u4e2d\u4f7f\u7528Composition… \u7ee7\u7eed\u9605\u8bfb 8\u3001Vue\u8fdb\u9636\u4e09<\/span><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-131","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-vue-js","7":"h-entry","9":"h-as-article"},"_links":{"self":[{"href":"https:\/\/blog.doorta.com\/index.php?rest_route=\/wp\/v2\/posts\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.doorta.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.doorta.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.doorta.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.doorta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=131"}],"version-history":[{"count":1,"href":"https:\/\/blog.doorta.com\/index.php?rest_route=\/wp\/v2\/posts\/131\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/blog.doorta.com\/index.php?rest_route=\/wp\/v2\/posts\/131\/revisions\/132"}],"wp:attachment":[{"href":"https:\/\/blog.doorta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.doorta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.doorta.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}