Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nadimtuhin/redux-vue
Vue redux binding like react-redux
https://github.com/nadimtuhin/redux-vue
redux redux-vue vue vue-redux
Last synced: 10 days ago
JSON representation
Vue redux binding like react-redux
- Host: GitHub
- URL: https://github.com/nadimtuhin/redux-vue
- Owner: nadimtuhin
- License: mit
- Created: 2017-01-10T11:40:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-27T01:54:53.000Z (over 2 years ago)
- Last Synced: 2024-10-14T03:25:07.508Z (24 days ago)
- Topics: redux, redux-vue, vue, vue-redux
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 19
- Watchers: 4
- Forks: 10
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue redux binding higher order component
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
install through ``npm i redux-vue --save``
## Initialize
install in your root component
```js
// main.js
import Vue from 'vue';
import { reduxStorePlugin } from 'redux-vue';
import AppStore from './AppStore';
import App from './Component/App';
// install redux-vue
Vue.use(reduxStorePlugin);
new Vue({
store: AppStore,
render(h) {
return
}
});
```
```js
// 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;
```
## Use in your component
```js
// components/App.js
import { connect } from 'redux-vue';
const App = {
props: {
todos: {
type: Array,
},
addTodo: {
type: Function,
},
},
methods: {
handleAddTodo() {
const todo = this.$refs.input.value;
this.addTodo(todo);
}
},
render(h) {
return
{this.todos.map(todo => - {todo}
)}
add todo
}
};
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);
```
## If you prefer to use single-file components
```js
// components/Comp.js
Hello world!
export default {
name: 'my-comp',
}
```
```js
// components/App.js
import { connect } from 'redux-vue'
import Comp from './Comp'
const mapStateToProps = (state) => ({})
const mapDispatchToProps = (dispatch) => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Comp)
```