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) } } }