{"id":5968,"date":"2024-04-17T23:20:26","date_gmt":"2024-04-17T15:20:26","guid":{"rendered":"http:\/\/zyg.luchers.cn\/?p=5968"},"modified":"2024-04-17T23:20:26","modified_gmt":"2024-04-17T15:20:26","slug":"%e7%ac%ac%e4%ba%94%e7%ab%a0%e3%80%81vuex","status":"publish","type":"post","link":"http:\/\/zyg.luchers.cn\/index.php\/2024\/04\/17\/%e7%ac%ac%e4%ba%94%e7%ab%a0%e3%80%81vuex\/","title":{"rendered":"\u7b2c\u4e94\u7ae0\u3001vuex"},"content":{"rendered":"

\u7b2c\u4e94\u7ae0\u3001vuex<\/h1>\n

1\u3001\u662f\u4ec0\u4e48<\/h2>\n

1\u3001\u6982\u5ff5<\/h3>\n

1\u3001\u5728Vue\u4e2d\u5b9e\u73b0\u96c6\u4e2d\u5f0f\u72b6\u6001\uff08\u6570\u636e\uff09\u7ba1\u7406\u7684\u4e00\u4e2aVue\u63d2\u4ef6\uff0c\u5bf9vue\u5e94\u7528\u4e2d\u591a\u4e2a\u7ec4\u4ef6\u7684\u5171\u4eab\u72b6\u6001\u8fdb\u884c\u96c6\u4e2d\u5f0f\u7684\u7ba1\u7406\uff08\u8bfb\/\u5199\uff09\uff0c\u4e5f\u662f\u4e00\u79cd\u7ec4\u4ef6\u95f4\u901a\u4fe1\u7684\u65b9\u5f0f\uff0c\u4e14\u9002\u7528\u4e8e\u4efb\u610f\u7ec4\u4ef6\u95f4\u901a\u4fe1\u3002<\/p>\n

2\u3001\u4e2a\u4eba\u7406\u89e3\uff1a\u662f\u5168\u5c40\u4e8b\u4ef6\u603b\u7ebf\u7684\u5347\u7ea7<\/p>\n

\"vuex\"<\/div><\/p>\n

2\u3001\u600e\u4e48\u7528<\/h2>\n

1\u3001\u4ec0\u4e48\u65f6\u5019\u4f7f\u7528<\/h3>\n

1\u3001\u591a\u7ec4\u4ef6\u9700\u8981\u5171\u4eab\u6570\u636e\u65f6\u7528<\/p>\n

2\u3001\u642d\u5efavuex\u7684\u73af\u5883<\/h3>\n

1\u3001\u7b2c\u4e00\u6b65<\/h4>\n

1\u3001\u5f15\u5165vuex<\/p>\n

npm install vuex@3<\/code><\/pre>\n
2\u3001\u6ce8\u610f\uff1avue3\u5bf9\u5e94\u7684vuex4\uff0cvue2\u5bf9\u5e94\u7684\u662fvuex3\uff0c\u6240\u4ee5\u8fd9\u91cc\u4f7f\u7528vuex3<\/p>\n
2\u3001\u7b2c\u4e8c\u6b65<\/h4>\n
1\u3001\u521b\u5efa\u6587\u4ef6\u4f53\u7cfb\uff1asrc\/store\/index.js<\/p>\n
\/\/\u5f15\u5165Vue\u6838\u5fc3\u5e93\nimport Vue from 'vue'\n\/\/\u5f15\u5165Vuex\nimport Vuex from 'vuex'\n\/\/\u5e94\u7528Vuex\u63d2\u4ef6\nVue.use(Vuex)\n\n\/\/\u51c6\u5907actions\u5bf9\u8c61\u2014\u2014\u54cd\u5e94\u7ec4\u4ef6\u4e2d\u7528\u6237\u7684\u52a8\u4f5c\nconst actions = {}\n\/\/\u51c6\u5907mutations\u5bf9\u8c61\u2014\u2014\u4fee\u6539state\u4e2d\u7684\u6570\u636e\nconst mutations = {}\n\/\/\u51c6\u5907state\u5bf9\u8c61\u2014\u2014\u4fdd\u5b58\u5177\u4f53\u7684\u6570\u636e\nconst state = {}\n\n\/\/\u521b\u5efa\u5e76\u66b4\u9732store\nexport default new Vuex.Store({\n    actions,\n    mutations,\n    state\n})<\/code><\/pre>\n
2\u3001\u5728\u9879\u76eemain.js\u4e2d\u521b\u5efavm\u65f6\uff0c\u4f20\u5165store<\/p>\n
......\n\/\/\u5f15\u5165store\nimport store from '.\/store'\n......\n\n\/\/\u521b\u5efavm\nnew Vue({\n    el:'#app',\n    render: h => h(App),\n    store\n})<\/code><\/pre>\n
3\u3001\u57fa\u672c\u4f7f\u7528<\/h3>\n
\"image-20231124201216631\"<\/div><\/p>\n
1\u3001\u5185\u5bb9<\/h4>\n
1\u3001\u521d\u59cb\u5316\u6570\u636e\u3001\u914d\u7f6eactions<\/code>`\u3001\u914d\u7f6e<\/code>`mutations<\/code>`\uff0c\u64cd\u4f5c\u6587\u4ef6<\/code>`store.js<\/code><\/code><\/p>\n
2\u3001\u4f8b\u5b50<\/h4>\n
\/\/\u5f15\u5165Vue\u6838\u5fc3\u5e93\nimport Vue from 'vue'\n\/\/\u5f15\u5165Vuex\nimport Vuex from 'vuex'\n\/\/\u5f15\u7528Vuex\nVue.use(Vuex)\n\nconst actions = {\n    \/\/\u54cd\u5e94\u7ec4\u4ef6\u4e2d\u52a0\u7684\u52a8\u4f5c\n    jia(context,value){\n        \/\/ console.log('actions\u4e2d\u7684jia\u88ab\u8c03\u7528\u4e86',miniStore,value)\n        context.commit('JIA',value)\n    },\n}\n\nconst mutations = {\n    \/\/\u6267\u884c\u52a0\n    JIA(state,value){\n        \/\/ console.log('mutations\u4e2d\u7684JIA\u88ab\u8c03\u7528\u4e86',state,value)\n        state.sum += value\n    }\n}\n\n\/\/\u521d\u59cb\u5316\u6570\u636e\nconst state = {\n   sum:0\n}\n\n\/\/\u521b\u5efa\u5e76\u66b4\u9732store\nexport default new Vuex.Store({\n    actions,\n    mutations,\n    state,\n})<\/code><\/pre>\n
3\u3001\u6ce8\u610f<\/h4>\n
1\u3001\u7ec4\u4ef6\u4e2d\u8bfb\u53d6vuex\u4e2d\u7684\u6570\u636e\uff1a<\/p>\n
$store.state.sum<\/code><\/pre>\n
2\u3001\u7ec4\u4ef6\u4e2d\u4fee\u6539vuex\u4e2d\u7684\u6570\u636e<\/p>\n
$store.dispatch('action\u4e2d\u7684\u65b9\u6cd5\u540d'\uff0c\u6570\u636e)\u6216\u8005\n$store.commit('mutations\u4e2d\u7684\u65b9\u6cd5\u540d'\uff0c\u6570\u636e)<\/code><\/pre>\n
3\u3001\u5982\u679c\u6ca1\u6709\u7f51\u7edc\u8bf7\u6c42\u6216\u5176\u4ed6\u4e1a\u52a1\u903b\u8f91\uff0c\u7ec4\u4ef6\u4e2d\u4e5f\u53ef\u4ee5\u8d8a\u8fc7actions\uff0c\u5373\u4e0d\u5199actions\uff0c\u76f4\u63a5\u7f16\u5199commit<\/p>\n
4\u3001getters\u7684\u4f7f\u7528<\/h3>\n
1\u3001\u6982\u5ff5<\/h4>\n
1\u3001\u5f53state\u4e2d\u7684\u6570\u636e\u4e3e\u8981\u7ecf\u8fc7\u52a0\u5de5\u540e\u518d\u4f7f\u7528\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528getters\u52a0\u5de5\u3002<\/p>\n
2\u3001\u5728store.js\u4e2d\u8ffd\u52a0getters\u914d\u7f6e<\/p>\n
\/\/ \u521b\u5efa\u5e76\u4e14\u66b4\u9732 store\n const store= new Vuex.Store({\n    actions,\n    mutations,\n    state,\n    getters\n})\nexport default  store<\/code><\/pre>\n
3\u3001\u7ec4\u4ef6\u4e2d\u8bfb\u53d6\u6570\u636e<\/p>\n
$store.getters.bigS<\/code><\/pre>\n
5\u3001\u56db\u4e2amap\u65b9\u6cd5\u7684\u4f7f\u7528<\/h3>\n
1\u3001\u4f5c\u7528<\/h4>\n
1\u3001\u5c31\u662f\u4e3a\u4e86\u5e2e\u52a9\u6211\u4eec\u7b80\u5316vuex\u7684\u5199\u6cd5\u5305\u62ec\uff08dispath\u3001mutations\u3001actions\u3001getters\u7684\u5199\u6cd5<\/p>\n
2\u3001mapState\u65b9\u6cd5<\/h4>\n
1\u3001\u7528\u4e8e\u5e2e\u52a9\u6211\u4eec\u6620\u5c04state\u4e2d\u7684\u6570\u636e\u4e3a\u8ba1\u7b97\u5c5e\u6027<\/p>\n
computed: {\n    \/\/\u501f\u52a9mapState\u751f\u6210\u8ba1\u7b97\u5c5e\u6027\uff1asum\u3001school\u3001subject\uff08\u5bf9\u8c61\u5199\u6cd5\uff09\n     ...mapState({sum:'sum',school:'school',subject:'subject'}),\n\n    \/\/\u501f\u52a9mapState\u751f\u6210\u8ba1\u7b97\u5c5e\u6027\uff1asum\u3001school\u3001subject\uff08\u6570\u7ec4\u5199\u6cd5\uff09\n    ...mapState(['sum','school','subject']),\n},<\/code><\/pre>\n
3\u3001mapGetters\u65b9\u6cd5<\/h4>\n
1\u3001\u7528\u4e8e\u5e2e\u52a9\u6211\u4eec\u6620\u5c04getters\u4e2d\u7684\u6570\u636e\u6170\u95ee\u8ba1\u7b97\u5c5e\u6027<\/p>\n
computed: {\n    \/\/\u501f\u52a9mapGetters\u751f\u6210\u8ba1\u7b97\u5c5e\u6027\uff1abigSum\uff08\u5bf9\u8c61\u5199\u6cd5\uff09\n    ...mapGetters({bigSum:'bigSum'}),\n\n    \/\/\u501f\u52a9mapGetters\u751f\u6210\u8ba1\u7b97\u5c5e\u6027\uff1abigSum\uff08\u6570\u7ec4\u5199\u6cd5\uff09\n    ...mapGetters(['bigSum'])\n},<\/code><\/pre>\n
4\u3001mapActions\u65b9\u6cd5<\/h4>\n
1\u3001\u7528\u4e8e\u5e2e\u52a9\u6211\u4eec\u751f\u6210actions\u5bf9\u8bdd\u7684\u65b9\u6cd5<\/p>\n
2\u3001\u5373\uff1a\u5305\u542b$.store.dispatch(xxx)\u7684\u51fd\u6570<\/p>\n
methods:{\n    \/\/\u9760mapActions\u751f\u6210\uff1aincrementOdd\u3001incrementWait\uff08\u5bf9\u8c61\u5f62\u5f0f\uff09\n    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})\n\n    \/\/\u9760mapActions\u751f\u6210\uff1aincrementOdd\u3001incrementWait\uff08\u6570\u7ec4\u5f62\u5f0f\uff09\n    ...mapActions(['jiaOdd','jiaWait'])\n}<\/code><\/pre>\n
5\u3001mapMutations\u65b9\u6cd5<\/h4>\n
1\u3001\u7528\u4e8e\u5e2e\u52a9\u6211\u4eec\u751f\u6210\u4e0emutations\u5bf9\u8bdd\u7684\u65b9\u6cd5<\/p>\n
2\u3001\u5373\uff1a\u5305\u542b$store.commit(xxx)\u7684\u51fd\u6570<\/p>\n
methods:{\n    \/\/\u9760mapActions\u751f\u6210\uff1aincrement\u3001decrement\uff08\u5bf9\u8c61\u5f62\u5f0f\uff09\n    ...mapMutations({increment:'JIA',decrement:'JIAN'}),\n\n    \/\/\u9760mapMutations\u751f\u6210\uff1aJIA\u3001JIAN\uff08\u5bf9\u8c61\u5f62\u5f0f\uff09\n    ...mapMutations(['JIA','JIAN']),\n}<\/code><\/pre>\n
6\u3001\u5907\u6ce8<\/h4>\n
1\u3001mapActions\u4e0emapMutations\u4f7f\u7528\u65f6\uff0c\u82e5\u9700\u8981\u4f20\u9012\u53c2\u6570\u9700\u8981\uff1a\u5728\u6a21\u677f\u4e2d\u7ed1\u5b9a\u4e8b\u4ef6\u65f6\u4f20\u9012\u597d\u53c2\u6570\uff0c\u5426\u5219\u53c2\u6570\u662f\u4e8b\u4ef6\u5bf9\u8c61\u3002<\/p>\n
7\u3001\u6a21\u5757\u5316+\u547d\u540d\u7a7a\u95f4<\/h4>\n
1\u3001\u4f5c\u7528<\/h5>\n
1\u3001\u8ba9\u4ee3\u7801\u66f4\u597d\u7ef4\u62a4\uff0c\u8ba9\u591a\u79cd\u6570\u636e\u5206\u7c7b\u66f4\u52a0\u660e\u786e<\/p>\n
2\u3001\u4fee\u6539store.js\u7684\u914d\u7f6e\u6587\u4ef6<\/h5>\n
const countAbout = {\n  namespaced:true,\/\/\u5f00\u542f\u547d\u540d\u7a7a\u95f4\n  state:{x:1},\n  mutations: { ... },\n  actions: { ... },\n  getters: {\n    bigSum(state){\n       return state.sum * 10\n    }\n  }\n}\n\nconst personAbout = {\n  namespaced:true,\/\/\u5f00\u542f\u547d\u540d\u7a7a\u95f4\n  state:{ ... },\n  mutations: { ... },\n  actions: { ... }\n}\n\nconst store = new Vuex.Store({\n  modules: {\n    countAbout,\n    personAbout\n  }\n})<\/code><\/pre>\n
2\u3001\u8bf4\u4eba\u8bdd\u5c31\u662f\u628a\u7ec4\u4ef6\u4e2d\u6240\u9700\u8981\u7684vuex\u5404\u81ea\u5f04\u6210\u4e00\u4e2a\u6a21\u5757\u5185\uff0c\u8fd9\u6837\u65b9\u4fbf\u4e0d\u540c\u6a21\u5757\u8fdb\u884c\u4fee\u6539<\/p>\n
3\u3001\u5f00\u542f\u547d\u540d\u7a7a\u95f4\uff0c\u7ec4\u4ef6\u5316\u4e2d\u8bfb\u53d6state\u6570\u636e<\/h5>\n
\/\/\u65b9\u5f0f\u4e00\uff1a\u81ea\u5df1\u76f4\u63a5\u8bfb\u53d6\nthis.$store.state.personAbout.list\n\/\/\u65b9\u5f0f\u4e8c\uff1a\u501f\u52a9mapState\u8bfb\u53d6\uff1a\n...mapState('countAbout',['sum','school','subject']),<\/code><\/pre>\n
4\u3001\u5f00\u542f\u547d\u540d\u7a7a\u95f4\uff0c\u7ec4\u4ef6\u4e2d\u8bfb\u53d6getters\u6570\u636e<\/h5>\n
\/\/\u65b9\u5f0f\u4e00\uff1a\u81ea\u5df1\u76f4\u63a5\u8bfb\u53d6\nthis.$store.getters['personAbout\/firstPersonName']\n\/\/\u65b9\u5f0f\u4e8c\uff1a\u501f\u52a9mapGetters\u8bfb\u53d6\uff1a\n...mapGetters('countAbout',['bigSum'])<\/code><\/pre>\n
5\u3001\u5f00\u542f\u547d\u540d\u7a7a\u95f4\u540e\uff0c\u7ec4\u4ef6\u4e2d\u8c03\u7528dispatch<\/h5>\n
\/\/\u65b9\u5f0f\u4e00\uff1a\u81ea\u5df1\u76f4\u63a5dispatch\nthis.$store.dispatch('personAbout\/addPersonWang',person)\n\/\/\u65b9\u5f0f\u4e8c\uff1a\u501f\u52a9mapActions\uff1a\n...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})<\/code><\/pre>\n
6\u3001\u5f00\u542f\u547d\u540d\u7a7a\u95f4\u540e\uff0c\u7ec4\u4ef6\u4e2d\u8c03\u7528commit<\/h5>\n
\/\/\u65b9\u5f0f\u4e00\uff1a\u81ea\u5df1\u76f4\u63a5commit\nthis.$store.commit('personAbout\/ADD_PERSON',person)\n\/\/\u65b9\u5f0f\u4e8c\uff1a\u501f\u52a9mapMutations\uff1a\n...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u7b2c\u4e94\u7ae0\u3001vuex 1\u3001\u662f\u4ec0\u4e48 1\u3001\u6982\u5ff5 1\u3001\u5728Vue\u4e2d\u5b9e\u73b0\u96c6\u4e2d\u5f0f\u72b6\u6001\uff08\u6570\u636e\uff09\u7ba1\u7406\u7684\u4e00\u4e2aVue\u63d2\u4ef6\uff0c\u5bf9vue\u5e94\u7528 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[46],"tags":[],"class_list":["post-5968","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts\/5968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/comments?post=5968"}],"version-history":[{"count":1,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts\/5968\/revisions"}],"predecessor-version":[{"id":5969,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/posts\/5968\/revisions\/5969"}],"wp:attachment":[{"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/media?parent=5968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/categories?post=5968"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zyg.luchers.cn\/index.php\/wp-json\/wp\/v2\/tags?post=5968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}