{"id":13536140,"url":"https://github.com/Vuedeux/vuedeux","last_synced_at":"2025-04-02T02:32:22.351Z","repository":{"id":215164845,"uuid":"79397278","full_name":"Vuedeux/vuedeux","owner":"Vuedeux","description":"Binding Solutions for Vue \u0026 Redux","archived":false,"fork":false,"pushed_at":"2017-11-18T02:07:33.000Z","size":721,"stargazers_count":69,"open_issues_count":3,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-03T01:32:19.562Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://vuedeux.com","language":"JavaScript","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/Vuedeux.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-19T00:02:41.000Z","updated_at":"2024-07-01T09:55:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"29f33c86-787b-4427-9ff7-93b0c0c329bb","html_url":"https://github.com/Vuedeux/vuedeux","commit_stats":null,"previous_names":["vuedeux/vuedeux"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vuedeux%2Fvuedeux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vuedeux%2Fvuedeux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vuedeux%2Fvuedeux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vuedeux%2Fvuedeux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vuedeux","download_url":"https://codeload.github.com/Vuedeux/vuedeux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743918,"owners_count":20826633,"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":[],"created_at":"2024-08-01T09:00:35.193Z","updated_at":"2025-04-02T02:32:22.079Z","avatar_url":"https://github.com/Vuedeux.png","language":"JavaScript","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","国家管理","Utilities","State Management"],"readme":"[![NPM](https://nodei.co/npm/vuedeux.png?compact=true)](https://npmjs.org/package/vuedeux)\n\n# vuedeux\n\n![Alt Text](https://github.com/dmrx/vuedoo/raw/master/examples/TodoMVC/assets/vuedeuxsmall.png)\n\n\n## Full Documentation\nhttps://vueduex.gitbooks.io/vuedeux-documentation/content/\n\n## Synopsis \n\nVuedeux is a lightweight open-source utility layer for binding Vuex to Redux in a way that allows developers to re-use their pre-existing Redux stores.\n\n## Motivation\nVuedeux answers our team's desire to create a simple way to re-use and share state-management code with Vue/Vuex. The decision to create the Vuedeux compatibility layer between Vuex and Redux was inspired by the idea of uniting the quickly growing Vue community and Redux's broad user-base and ecosystem.\n\nWe love Vue \u0026 Vuex. We love the elegance and the tight integration. We love Redux. We love that it is framework agnostic and has a robust ecosystem of tools, middlewares, and bindings.\n\nWe wanted to make them work together in a developer-friendly and highly customizable way to encourage interoperability and streamline reusability of code bases.\n\nVuedeux allows Redux developers to feel at home in Vue while providing all the conveniences and efficiencies of Vuex.\n\n\n## How It Works\nThe Vuedeux Plugin Creator takes your Redux action types and Redux store, and then maps your Redux state and all associated actions to a Vuex module with equivalent actions and mutations, allowing you to easily reuse your existing Redux state store and dispatch to Vuex just like you would with Redux.\n\n## Prerequisites\nRedux, Vue, Vuex\n\n## FIRING UP A SIMPLE VUEDEUX EXAMPLE - TODO MVC\nFork and clone down a copy of this repository, and navigate to the directory within your terminal.\n\nTo download and install all dependencies\n\nrun:\n```\n npm install\n ```\n\nStart up the dev server\n```\nnpm start\n```\n\nYou should now be able to navigate to http://localhost:8080/ to demo the app.\n\nThe architecture of this classic TODO MVC app can be found in the examples folder and offers a simple example of the Vuedeux data flow from Vuex to Redux and back.\n\n## Installation\n```\nnpm install vuedeux\n```\n## Getting Started\nIn this section we will be breaking down how to get started with the Vuedeux Plugin Creator.\n\nThe Vuedeux plugin initiates a Vuex module and maps all actions between the newly created Vuex module and Redux. It also keeps our Redux store and our Vuex 'Vuedeux' module in sync.\n\n### Importing the dependencies\n```\nimport vdxPluginCreator from 'vuedeux';\nimport reduxStore from './reduxstore';\nimport * as reduxActionTypes from './actions/reduxactiontypes';\n```\nThe dependencies for the Vuedeux plugin are:\n* Vuedeux package\n* Your Redux store\n* Your Action Type CONSTANTS\n\nIt is common convention in Flux and Redux to identify your Action Types using Constants and group them together in their own file (as seen below) . Vuedeux relies on this convention in order to accurately map your Redux Action types to Vuex actions and mutations.\n\nThe PluginCreators expects your Action Type Constants in an object.\n```\nimport * as reduxActionTypes from './actions/reduxactiontypes';\n```\nThe following Node import statement is an easy way for you to create an action type object from your action types.\n```\n// ReduxActionTypes.js\n\nexport const ADD_TODO = 'ADD_TODO';\nexport const DELETE_TODO = 'DELETE_TODO'\nexport const EDIT_TODO = 'EDIT_TODO'\nexport const COMPLETE_TODO = 'COMPLETE_TODO'\nexport const COMPLETE_ALL = 'COMPLETE_ALL'\nexport const CLEAR_COMPLETED = 'CLEAR_COMPLETED'\n```\n### Generating the plugin\n```\nconst vdx = vdxPluginCreator(reduxStore, reduxActionTypes);\n```\nAgain, you may call the plugin anything you wish. Above we are calling our plugin 'vdx' for simplicty.\n\n### Inserting the plugin into a Vuex Store\n```\nconst store = new Vuex.Store({\nstate,\nmutations,\nplugins: [vdx],\n});\n```\nTo add the plugin simply place it into the plugin option of your Vuex store.\n\nAll the existing mutations, actions, getters, even existing plugins you utilize in an existing Vuex state will be unaffected.\n\n### Putting it all together\n```\n//vuex.js\n\nimport Vue from 'vue';\nimport Vuex from 'vuex';\nimport { state, mutations } from './mutations';\n\nimport vdxPluginCreator from 'vuedeux';\nimport reduxStore from './reduxstore';\nimport * as reduxActionTypes from './actions/reduxactiontypes';\n\n\n// Make sure to call Vue.use(Vuex) first if you're using a Vue module build system\nVue.use(Vuex);\n\nconst vdx = vdxPluginCreator(reduxStore, reduxActionTypes);\n\nconst store = new Vuex.Store({\nstate,\nmutations,\nplugins: [vdx, localStoragePlugin],\n});\n\nexport default store;\n```\n\n### Your new Vuex Structure\n* VUEX STORE ($store in child components)\n  * STATE ($store.state)\n    * REDUX --- ($store.state.redux)\n      * (Your existing Redux Store)\n\n## Contributers\nNikol Marentes, David Marx, \u0026 Brian Rudloff \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVuedeux%2Fvuedeux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVuedeux%2Fvuedeux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVuedeux%2Fvuedeux/lists"}