Originated from Nadim Tuhin's https://github.com/nadimtuhin/redux-vue
#TODO
- Need to have an exact copy of the parent component during extend
Vue Redux is tested to work on vue v2 and should be used with vue-jsx, component template string or single-file components. For more on vue-jsx https://github.com/vuejs/babel-plugin-transform-vue-jsx
install through npm i redux-vue-connect --save
install in your root component
// main.js import Vue from 'vue'; import { reduxStorePlugin } from 'redux-vue-connect'; import AppStore from './AppStore'; import App from './Component/App'; // install redux-vue-connect Vue.use(reduxStorePlugin); new Vue({ store: AppStore, render(h) { return <App /> } });// store.js import { createStore } from 'redux'; const initialState = { todos: [] }; const reducer = (state = initialState, action) => { switch(action.type){ case 'ADD_TODO': return { ...state, todos: [...state.todos, action.data.todo] } default: return state; } } const AppStore = createStore(reducer); export default AppStore;// components/App.js import { connect } from 'redux-vue-connect'; const App = { props: { todos: { type: Array, }, addTodo: { type: Function, }, }, methods: { handleAddTodo() { const todo = this.$refs.input.value; this.addTodo(todo); } }, render(h) { return <div> <ul> {this.todos.map(todo => <li>{todo}</li>)} </ul> <div> <input type="text" ref="input" /> <button on-click={this.handleAddTodo}>add todo</button> </div> </div> } }; function mapStateToProps(state) { return { todos: state.todos }; } function mapActionToProps(dispatch) { return { addTodo(todo) { dispatch({ type: 'ADD_TODO', data: { todo } }) } } } export default connect(mapStateToProps, mapActionToProps)(App);// components/Comp.js <template> <div> Hello world! </div> </template> <script> export default { name: 'my-comp', } </script> <style > </style>// components/App.js import { connect } from 'redux-vue' import Comp from './Comp' const mapStateToProps = (state) => ({}) const mapDispatchToProps = (dispatch) => ({}) export default connect(mapStateToProps, mapDispatchToProps)(Comp)