{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/4029","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/4029/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/4029/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/4029/events","html_url":"https://github.com/vuejs/vue/issues/4029","id":185119600,"number":4029,"title":"React context-like feature","user":{"login":"sebastiandedeyne","id":1561079,"avatar_url":"https://avatars.githubusercontent.com/u/1561079?v=3","gravatar_id":"","url":"https://api.github.com/users/sebastiandedeyne","html_url":"https://github.com/sebastiandedeyne","followers_url":"https://api.github.com/users/sebastiandedeyne/followers","following_url":"https://api.github.com/users/sebastiandedeyne/following{/other_user}","gists_url":"https://api.github.com/users/sebastiandedeyne/gists{/gist_id}","starred_url":"https://api.github.com/users/sebastiandedeyne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sebastiandedeyne/subscriptions","organizations_url":"https://api.github.com/users/sebastiandedeyne/orgs","repos_url":"https://api.github.com/users/sebastiandedeyne/repos","events_url":"https://api.github.com/users/sebastiandedeyne/events{/privacy}","received_events_url":"https://api.github.com/users/sebastiandedeyne/received_events","type":"User","site_admin":false},"labels":[{"id":300024015,"url":"https://api.github.com/repos/vuejs/vue/labels/discussion","name":"discussion","color":"d4c5f9","default":false},{"id":217551163,"url":"https://api.github.com/repos/vuejs/vue/labels/feature%20request","name":"feature request","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":18,"created_at":"2016-10-25T13:35:54Z","updated_at":"2016-11-24T19:19:47Z","closed_at":null,"body":"Would a React context-like feature ever be added?\n\nContext is an implicit way to pass down data from a component without having to pass them through props on every level.\n\nhttps://facebook.github.io/react/docs/context.html\n\nIt's generally not a good idea to use context for application-specific logic, but it's very useful for objects like stores.\n\nCurrently working on a helper mixin that achieves something similar, but would prefer to see this baked in the core.\n"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/262834457","html_url":"https://github.com/vuejs/vue/issues/4029#issuecomment-262834457","issue_url":"https://api.github.com/repos/vuejs/vue/issues/4029","id":262834457,"user":{"login":"yurimorini","id":12209920,"avatar_url":"https://avatars.githubusercontent.com/u/12209920?v=3","gravatar_id":"","url":"https://api.github.com/users/yurimorini","html_url":"https://github.com/yurimorini","followers_url":"https://api.github.com/users/yurimorini/followers","following_url":"https://api.github.com/users/yurimorini/following{/other_user}","gists_url":"https://api.github.com/users/yurimorini/gists{/gist_id}","starred_url":"https://api.github.com/users/yurimorini/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yurimorini/subscriptions","organizations_url":"https://api.github.com/users/yurimorini/orgs","repos_url":"https://api.github.com/users/yurimorini/repos","events_url":"https://api.github.com/users/yurimorini/events{/privacy}","received_events_url":"https://api.github.com/users/yurimorini/received_events","type":"User","site_admin":false},"created_at":"2016-11-24T19:19:47Z","updated_at":"2016-11-24T19:19:47Z","body":"In addition to the example by @ktsn this approach can be useful to act similar to a Service Locator to decouple components from services and avoid to \"require()\" a service instance (as I read as solution in some examples) \r\n\r\n    import fetcher from \"Fetcher\" \r\n\r\n    // I want to configure the Fetcher or use a fetcher \"interface\"\r\n    // I want to avoid to mock the require in testing\r\n    \r\n    const app = new Vue({\r\n      methods: {\r\n        useService: function() {\r\n          fetcher.fetch()\r\n        }\r\n      }\r\n    }); \r\n\r\nUsing the approach from @HerringtonDarkholme I actually solved the issue with this [proof of concept implementation](https://gist.github.com/yurimorini/d3cbac44cab2c47a5de3f45dd694635d)\r\n      \r\n    // app .js   \r\n    const app = new Vue({\r\n      el: config.el,\r\n\r\n      // declares services in a component\r\n      // or at root level\r\n      services: {\r\n        fetcher: Fetcher(config.endpoints),\r\n        dispatcher: channel(\"app\")\r\n      }\r\n    });\r\n\r\n    // component.js\r\n    export default {\r\n      template: template,\r\n\r\n      // inject only the needed service in a property\r\n      // or in a $services object visible only from the component\r\n      // asking for the service id or other valuable mechanism\r\n      inject: {\r\n        disp: 'dispatcher'\r\n      },\r\n      \r\n      methods: {\r\n        dispatch: function() {\r\n          this.disp.publish(\"commands\", {});\r\n        }\r\n      }\r\n    }\r\n    \r\nBeside the implementation as a plugin, which uses an awful global container, defining the services as a key value pairs remind me the data props definition and open the more complex features (like querying for a feature or interface).\r\n    "}}
{"actor":{"display_login":"yurimorini"}}