vuex与redux的使用

Vuex的使用：

state:存储数据
mutations：修改state数据的同步方法
actions：异步方法，请求之类的
modules：挂载别的仓库
Vue实例中使用this.$store.XX来使用数据，调用action中的方法需要

this.$store.dispatch('方法名'，{参数为对象，没有的话可以省略})

进行分发，需要调用mutations中的方法需要

this.$store.commit('方法名'，{参数为对象，没有的话可以省略})

进行提交
Vuex也有辅助函数

import { mapState, mapMutations，mapActions } from 'vuex'

然后state的数据可以在计算属性中获取，然后直接this.数据进行使用

 computed: {
    ...mapState(['数据'])
    }

方法在methods中展开获取

 ...mapMutations(['方法名'])

---

~~

redux的使用：

~~
1.新建一个store，类似管理员

import { createStore,applyMiddleware,compose  } from 'redux';
import reducer from './reducers'
const store=createStore( reducer,);
export default store;

2.新建一个数据仓库reducers.js，抛出的是一个纯函数，并在store中引入

import { CHANGE_INPUT_VALUE} from './actionTypes';
const defaultState = {}
export default (state = defaultState, action) => {
    const newState = JSON.parse(JSON.stringify(state))
    if (action.type === CHANGE_INPUT_VALUE) {
        newState.inputValue = action.value
        return newState
    }
    return state;
}

3.在入口函数中引入

import { Provider} from 'react-redux'
import store from './store'

并在根组件上使用Provider ，使包裹的组件都可以使用store的数据

const App= (
  <Provider store={store}>
  <TodoList />
    </Provider>
)

4.给需要用到store数据的组件进行连接store,引入

import {connect} from 'react-redux'

并且在抛出的时候改为连接的方式，mapStateToProps为获取的store中的数据，mapDispatchToProps修改store中的数据的方法

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

例如：实现实时修改input中的数据
（1）绑定数据，并绑定onChange方法

  <Input
                placeholder="我是输入框"
                value={props.inputValue}
                onChange={props.handleChange}
            />

并在mapStateToProps中获取

const mapStateToProps=(state)=>{
    return {
        inputValue:state.inputValue,
    }
}

2.onChange的方法写在mapDispatchToProps中，需要创建一个action来告诉store将要进行什么操作，步骤如下：

2.1.新建一个actionTypes.js用来声明action的类型，之所以专门用一个js文件来声明，是防止因为常量的拼写错误而导致的找不到错误，具体要声明多少个，根据自己的需求来决定

export const CHANGE_INPUT_VALUE='CHANGE_INPUT_VALUE';

2.2.新建一个actionCreator.js用来专门存放action.方便管理，action只能返回一个对象，如果有引入redux-thunk就可以返回一个函数，一般用户发送ajax请求

import { CHANGE_INPUT_VALUE } from './actionTypes';
export const getInputValueChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})

2.3这样就是实现了利用rudex完成数据更新

const mapDispatchToProps=(dispatch)=>{
    return {
        handleChange(e){
            const action = getInputValueChangeAction(e.target.value)
            dispatch(action)
        }
    }
}