vue-with-redux
vue-with-redux
中文版
This is a plugin for Vue to work with Redux. Redux is very popular with React.js. And vue-with-redux provide a way for you to let Vue work with Redux. This will be a defferent experience.
Start
First you can install this library from npm
npm install -save vue-with-redux
How to run the demo
git clone https://github.com/ryouaki/vue-with-redux.git
npm install
npm run serve
Usage
This is the sample you need to do on your entry JavaScript file:
// entry.js
... // some import you need
import VuexRedux from 'vue-with-redux';
import { makeReduxStore } from 'vue-with-redux';
import reduces from 'YOUR-REDUCERS';
import middlewares from 'REDUX-MIDDLEWARES';
Vue.use(VuexRedux);
let store = makeReduxStore(reduces, [middlewares]);
new Vue({
store,
render: h => h(App)
}).$mount('#app')
This is the action demo:
export function test() {
return {
type: 'TEST'
}
}
export function asyncTest() {
return (dispatch, getState) => {
setTimeout( () => {
console.log('New:', getState());
dispatch({type: 'TEST'});
console.log('Old', getState());
}, 100);
}
}
Note: You do not need redux-thunk for vue-with-redux. it work with async code.
This is the reducer demo:
function reduce (state = { count: 0 }, action) {
switch(action.type) {
case 'TEST':
state.count++;
return state;
default:
return state;
}
}
export default {
reduce
};
This is the demo for Vue Component:
<template>
<div>
<button @click="clickHandler1">Action Object</button>
<button @click="clickHandler2">Sync Action</button>
<button @click="clickHandler3">Async Action</button>
<p>{{reduce.count}}</p>
</div>
</template>
<script>
import { test, asyncTest } from './../actions';
export default {
name: 'HelloWorld',
props: {
msg: String
},
// you must initial the statetree which you subscribe from redux in data().
data() {
return {
reduce: {}
}
},
methods: {
clickHandler1() {
this.dispatch({type: 'TEST'});
},
clickHandler2() {
this.dispatch(test());
},
clickHandler3() {
this.dispatch(asyncTest());
},
// you must declare a mapReduxState to let vue-with-redux know what state should be subscribed.
// the parameter [ state ] is the root state of redux.
mapReduxState(state) {
return {
reduce: state.reduce
}
},
}
}
</script>