{"id":14973778,"url":"https://github.com/dwqs/vue-mobx","last_synced_at":"2025-10-27T02:31:25.185Z","repository":{"id":58246230,"uuid":"98594494","full_name":"dwqs/vue-mobx","owner":"dwqs","description":":smile: :star: :innocent: Mobx binding for Vuejs 2.","archived":true,"fork":false,"pushed_at":"2018-05-27T10:10:42.000Z","size":138,"stargazers_count":110,"open_issues_count":2,"forks_count":5,"subscribers_count":14,"default_branch":"dev","last_synced_at":"2025-01-15T08:55:21.658Z","etag":null,"topics":["mobx","mobx-vue","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwqs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-28T01:29:56.000Z","updated_at":"2025-01-14T09:45:48.000Z","dependencies_parsed_at":"2022-08-31T04:40:08.909Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/vue-mobx","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-mobx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-mobx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-mobx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fvue-mobx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/vue-mobx/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238422921,"owners_count":19469656,"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":["mobx","mobx-vue","vuejs2"],"created_at":"2024-09-24T13:49:23.962Z","updated_at":"2025-10-27T02:31:19.914Z","avatar_url":"https://github.com/dwqs.png","language":"TypeScript","funding_links":[],"categories":["公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["国家管理","Utilities","State Management"],"readme":"[![build pass](https://api.travis-ci.org/dwqs/vue-mobx.svg?branch=master)](https://travis-ci.org/dwqs/vue-mobx) ![npm-version](https://img.shields.io/npm/v/vue-mobx.svg) ![license](https://img.shields.io/npm/l/vue-mobx.svg) ![bower-license](https://img.shields.io/bower/l/vue-mobx.svg)\n\n# vue-mobx\n\nMobx binding for Vue.\n\n\u003e Only supports Vuejs 2.x \u0026 Mobx 2.2.x or higher.\n\n## Installation\nInstall the pkg with npm:\n\n```\nnpm install vue-mobx --save\n```\n\nor yarn\n\n```\nyarn add vue-mobx\n```\n\nor bower\n\n```\nbower install vue-mobx\n```\n\n## Usage\n\nObviously it works with Mobx and Vuejs, install via NPM: `npm i --save mobx vue vue-mobx`:\n\n#### 1. install vue-mobx plugin:\n\n```js\n// entry.js\nimport Vue from 'vue';\nimport {observable, isObservable, toJS} from 'mobx';\nimport VueMobx from 'vue-mobx';\n\nVue.use(VueMobx, {\n    toJS: toJS, // must\n    isObservable: isObservable, // must\n    observable: observable,  // optional\n});\n```\n#### 2. create models:\n\n```js\n// create models\n\nimport {observable, action} from 'mobx';\n\nclass Test {\n    @observable\n    count = 0;\n\n    @action.bound\n    changeCount(){\n        ++this.count;\n    }\n}\n\nconst test = new Test();\nexport default test;\n```\n\n#### 3. use models in vue component:\n\n```js\n// in vue component\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cp\u003ecount: {{count}}\u003c/p\u003e\n        \u003cp @click=\"changeCount\"\u003eUpdate\u003c/p\u003e\n    \u003c/div\u003e\n\u003c/template\u003e    \n\u003cscript\u003e\n    import testModel from './mobx/test';\n\n    export default {\n        fromMobx: {\n            testModel\n        }\n    }\n\u003c/script\u003e\n```\n\nThere is a full [example](https://github.com/dwqs/vue-mobx/tree/master/example).\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fvue-mobx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Fvue-mobx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fvue-mobx/lists"}