{"id":13536208,"url":"https://github.com/wakeupmypig/vue-plan","last_synced_at":"2025-12-30T02:06:57.126Z","repository":{"id":98835780,"uuid":"90724018","full_name":"wakeupmypig/vue-plan","owner":"wakeupmypig","description":"使用vue+vue-router+vuex+boostrap实现计划表系统","archived":false,"fork":false,"pushed_at":"2017-05-10T23:45:20.000Z","size":508,"stargazers_count":34,"open_issues_count":0,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-07-18T07:51:07.534Z","etag":null,"topics":["bootstrap","vue-cli","vue-router","vue2js","vuex"],"latest_commit_sha":null,"homepage":"https://wakeupmypig.github.io/vue-plan/dist/#/home","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wakeupmypig.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-09T08:52:29.000Z","updated_at":"2024-06-11T03:34:10.000Z","dependencies_parsed_at":"2023-03-13T15:54:09.941Z","dependency_job_id":null,"html_url":"https://github.com/wakeupmypig/vue-plan","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wakeupmypig%2Fvue-plan","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wakeupmypig%2Fvue-plan/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wakeupmypig%2Fvue-plan/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wakeupmypig%2Fvue-plan/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wakeupmypig","download_url":"https://codeload.github.com/wakeupmypig/vue-plan/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213496104,"owners_count":15595942,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","vue-cli","vue-router","vue2js","vuex"],"created_at":"2024-08-01T09:00:35.876Z","updated_at":"2025-12-30T02:06:57.120Z","avatar_url":"https://github.com/wakeupmypig.png","language":"JavaScript","funding_links":[],"categories":["实用库"],"sub_categories":[],"readme":"# Vuex-状态管理\nVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。\n## 1.安装vue-cli\n### 安装命令行工具\nnpm install vue-cli -g\n### 选择模板\n- webpack\n- webpack-simple\n- browserify\n- browserify-simple\n- simple\n## 2.生成项目\n```\nvue init \u003ctemplate-name\u003e#版本号 \u003cproduct-name\u003e\n```\n## 3.安装依赖并启动\n```\n$ cd myApp \u0026\u0026 npm install \n$ npm run dev\n$ npm install vuex --save\n```\n\n## 4.安装调试工具dev-tool\nhttps://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd\n\n## 5.单向数据流\n- state，驱动应用的数据源；\n- view，以声明方式将state映射到视图；\n- actions，响应在view上的用户输入导致的状态变化。\n---\n![](https://vuex.vuejs.org/zh-cn/images/flow.png)\n\n## 6.组件共享状态\n- 多个视图依赖于同一状态。\n- 来自不同视图的行为需要变更同一状态。\n![](https://vuex.vuejs.org/zh-cn/images/vuex.png )\n\n## 7.State-状态  \n单一状态树:用一个对象就包含了全部的应用层级状态。这个对象就是State，整个应用只能包含一个store的实例。\n--- \n使用vuex创建状态,在App.vue下实现计数功能\n```\n\u003cdiv id=\"app\"\u003e\n       \u003c!--count应该归state管理--\u003e\n       计数器 {{count}}\n       \u003cbutton\u003e增加\u003c/button\u003e\n\u003c/div\u003e\n```\n创建store\n```\n$ cd src \u0026\u0026 mkdir store\n$ cd store \u0026\u0026 touch index.js\n```\n```\nimport Vue from 'vue';\nimport Vuex from 'vuex';\nVue.use(Vuex);\nconst state = {\n  count:0\n};\nexport const store = new Vuex.Store({\n  state\n});\n```\n在main.js中引入store\n```\nimport {store} from './store'\nnew Vue({\n  el: '#app',\n  router,\n  store,\n  ...App\n});\n```\n在页面上展示count\n```\ncomputed:{\n    count(){\n        return this.$store.state.count;\n    }\n}\n```\n辅助函数`mapState`可以简化写法\n```\ncomputed:{\n    ...mapState([ // 不更改数据名\n        'count'\n    ])\n    ...mapState({ // 更改数据名\n      count:'count'\n    })\n}\n```\n\n## 8.Mutations-突变\n更改Vuex中store的数据，只能通过提交mutation，每个mutation都有一个type和回调函数，回调函数中的参数就是当前store中的state\n---\n创建mutations\n```\nconst INCREMENT = 'increment';\nconst mutations = {\n  [INCREMENT](state,n){\n    state.count += n;\n  }\n};\nexport const store = new Vuex.Store({\n  state,\n  mutations\n});\n```\n更改页面count\n```\n\u003cbutton @click=\"add\"\u003e增加\u003c/button\u003e\nmethods:{\n    add(){\n        this.$store.commit('increment',1);\n    }\n}\n```\n辅助函数`mapMutations可以简化写法\n```\nimport {mapState,mapMutations} from 'vuex';\nmethods:{\n    add(){\n        this.increment(2);\n    },\n    ...mapMutations([\n      'increment'\n    ])\n}\n```\n\n\u003e mutation只能写同步方法，一般是通过action中的commit提交到mutation中，我们一般只需派发action即可\n\n## 9.Actions\n- Action提交的是mutation，不能直接更改状态 \n- Action可以包含异步操作\n---\n通过action提交到mutation中\n```\nconst actions = {\n  [INCREMENT]({commit},n){\n    commit(INCREMENT,n)\n  }\n};\nexport const store = new Vuex.Store({\n  state,\n  mutations,\n  actions\n});\n```\n直接使用`mapActions`简化操作\n```\nimport {mapState,mapMutations,mapActions} from 'vuex';\nmethods:{\n    add(){\n        this.increment(1);\n    },\n    ...mapActions([\n        'increment'\n    ])\n}\n```\n\n## 10.Getters\nVuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。Getters 接受 state 作为其第一个参数：\n---\n想判断当前count是奇数还是偶数\n```\nconst getters = {\n  computeCount(state){\n    return state.count%2==0?'偶数':'奇数'\n  }\n};\nexport const store = new Vuex.Store({\n  state,\n  mutations,\n  actions,\n  getters\n});\n```\n直接使用`mapGetters`简化操作\n```\nimport {mapState,mapMutations,mapActions,mapGetters} from 'vuex';\ncomputed:{\n    ...mapGetters([\n        'computeCount'\n    ])\n},\n```\n在页面上将变量取出\n```\n{{count}}\n```\n\n\n\n# vue-plain\n\n\u003e A Vue.js project\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\nFor detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwakeupmypig%2Fvue-plan","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwakeupmypig%2Fvue-plan","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwakeupmypig%2Fvue-plan/lists"}