How Vue uses Redux

This article mainly introduces how to use Redux with Vue. The content is quite good. I will share it with you now and give it as a reference.

Looking at the Vuex source code last weekend, I suddenly had an inspiration, why is it all Vuex?

So I wrote a plug-in all afternoon to help Vue use Redux

Gayhub Url

Vue-with-Redux

This is a plug-in to help Vue use Redux to manage state. Redux is a very popular state management tool. vue-with-redux provides you with a way to use Redux in the Vue environment. This time brings a different development experience.

Start

First you need to install vue-with-redux through the following command

npm install -save vue-with-redux

Run Demo

 git clone https://github.com/ryouaki/vue-with-redux.git
 npm install
 npm run serve

##Usage

You need to modify your entry file as follows:

 // 有可能是你的entry.js文件
 ... // 这里是你引入的其它包
 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')

The following is an actionCreate function:

 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 to use redux-thunk, because Vue-with-Redux already provides support for asynchronous processing.

This is an example of a reducer:

 function reduce (state = { count: 0 }, action) {
 switch(action.type) {
  case 'TEST':
  state.count++;
  return state;
  default:
  return state;
 }
 }

 export default {
 reduce
 };

Vue component example:

 <template>
 <p>
  <button @click="clickHandler1">Action Object</button>
  <button @click="clickHandler2">Sync Action</button>
  <button @click="clickHandler3">Async Action</button>
  <p>{{reduce.count}}</p>
 </p>
 </template>

 <script>
 import { test, asyncTest } from &#39;./../actions&#39;;

 export default {
 name: &#39;HelloWorld&#39;,
 props: {
  msg: String
 },
 // 你必须在这里预先定义你订阅的Redux中的状态。否则编译模版会报错。
 data() {
  return {
  reduce: {}
  }
 },
 methods: {
  clickHandler1() {
  this.dispatch({type: &#39;TEST&#39;});
  },
  clickHandler2() {
  this.dispatch(test());
  },
  clickHandler3() {
  this.dispatch(asyncTest());
  },
  // 你必须实现一个mapReduxState函数，用于告诉Vue-with-Redux你需要订阅哪些redux中的状态
  // [ state ] 参数就是redux状态树的根。
  mapReduxState(state) { 
  return {
   reduce: state.reduce
  }
  },
 }
 }
 </script>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to vue routing interception and page jump setting methods

vue data cannot use arrows Problem analysis of functions

The above is the detailed content of How Vue uses Redux. For more information, please follow other related articles on the PHP Chinese website!