vue教程——13 Vuex

一 什么是Vuex？

说白了，就是多个页面共同维护一组数据的状态。比如有一组数据dataS； A页面 改变了这组数据，B页面此时也需要监听到这组数据的变化，随之做出自己的处理。

例如，A页面修改了用户名，B页面这个时候也需要监听到用户名的修改并渲染到页面上。以上的例子，我们知道的动作有：A页面改变数据 B页面拿到数据并监听数据，其实这些就是vuex的操作。

二 vuex核心组成模块

1. State ： 定义了存放的数据。就是上面的dataS
2. Getter：让组件获取state中的值(dataS)，就是B页面获取值并监听的时候，我们通过这个获取值
3. Mutation：修改state中的值，就是A页面要修改值， 就用这个方法。这个方法里面必须是同步函数
4. Action：用于提交Mutation，这里可以进行异步操作。说白了就是异步操作以后，调用Mutation，修改State中的值。
5. Module：当页面需要维护的数据太多了，写一个页面里面维护很麻烦，通过Module可以模块化上面四个属性，模块化后，可以根据数据的用处命名。

三 vuex初体验

const store = new Vuex.Store({state:{//存的数据},getters:{//获取state中的值},mutations: {//同步操作，改state中的值},actions: {//异步，提交mutations，来改state中的值},//模块化，让每个模块有自己的state,getters，mutations,actionsmodules: {Ma: moduleA,Mb: moduleB,//...}
});

四 getter用法----------怎么获取state中的值呢？(B组件怎么获取并监听state的值呢？)

   // 页面B<div> {{stateName}} </div>computed: {stateName () {//1.直接获取store中的值return store.state.username;// 2.使用getter获取(常用)return store.getters.username;}}  

既然store.state.username 能获取，那为啥用store.getters.username呢？
getter相当于在state.username 到 B页面获取 之间加一层，这一层想干啥干啥

一般来说我们用getter就是为了取数据，啥也不做。

const store = new Vuex.Store({state:{username:'',},getters:{usernameGetter: (state)=>{ retrun  state.username + 'Vuex牛逼'}},mutations: {//同步操作，改state中的值},actions: {//异步，提交mutations，来改state中的值},});

五 mutaitions用法----------怎么改变state中的值呢？(A页面怎么改变state的值呢？)

// A页面
<div @click='changeName'> 修改名字 </div>changeName(){store.commit('SET_USERNAME', 'FLX');
}const store = new Vuex.Store({state:{username:'',},getters:{username: (state)=>{ retrun  state.username}// 或者username: state => state.username},mutations: {SET_USERNAME(state,username){state.username = username}},actions: {//异步，提交mutations，来改state中的值},});

但是一般usename是后端返回的，那这个异步操作应该怎么写呢？

// A页面
<div @click='changeName'> 修改名字 </div>changeName(){store.dispatch('getUserName')
}const store = new Vuex.Store({state:{username:'',},getters:{username: (state)=>{ retrun  state.username}// 或者username: state => state.username},mutations: {SET_USERNAME(state,username){state.username = username}},actions: {// 1.异步操作 api，用户获取后端返回的username// 2.commit提交给mutationsgetUserName({ commit }){getUser().then(resp=>{commit('SET_USERNAME', data.username)})}},});

六 modules模块化

const moduleA = {state: {...},getters: {...},mutations: {....},actions: {...}
}const moduleB = {state: {...},getters: {...},mutations: {....},actions: {...}
}const store = new Vuex.Store({modules: {Ma: moduleA,Mb: moduleB}
});

七 语法糖 ：对操作大量state、getter、mutations、actions的简写

1. MapState

当我们需要取计算属性多个值的时候，得写多个compute，那有没有简单的写法呢？ 有

const store = new Vuex.Store({state:{username:'',age:'',sex:''},getters:{},mutations: {},actions: {},});// 如果不用mapState
<div>{{stateName}}</div>
<div>{{stateAge}}</div>
<div>{{stateSex}}</div>computed: {stateName () {//1.直接获取store中的值return store.state.username;},stateAge () {//1.直接获取store中的值return store.state.age;},stateSex () {//1.直接获取store中的值return store.state.sex;}}  // 如果用了mapstate
/*mapstate接收两个参数：1 数组：直接从state中取，渲染页面也用这个名字2 对象，比上面数组多一个优点，给这个被computed监听的对象起个名字
*/// 数组形式
<div>{{username}}</div>
<div>{{age}}</div>
<div>{{sex}}</div>computed: {// 语法糖，跟上面写法其实一致。这个是简写。...mapState(['username','age','sex'])}  // 对象形式
<div>{{stateName}}</div>
<div>{{stateAge}}</div>
<div>{{stateSex}}</div>computed: {// 语法糖，简写。...mapState({stateName:state=>state.username,stateAge:state=>state.age,stateSex:state=>state.sex})}  

2. mapGetters

// 与mapState用法一致// 假设这些东西，getter中已经定义好了computed: {...mapGetters(['username','age','sex'])// 语法糖，简写。...mapState({stateName:state=>state.username,stateAge:state=>state.age,stateSex:state=>state.sex})}  

3. mapMutaions

如果一个页面中需要执行多个mutations方法，这个时候可以用mapMutations方便管理与使用

const store = new Vuex.Store({state:{username:'',age:'',sex:''},getters:{},mutations: {SET_USERNAME(state,username){state.username = username},SET_AGE(state,age){state.age = age},SET_SEX(state,sex){state.sex = sex}},actions: {},
});// 如果没有使用mapMutations
<div @click='changeName'> 修改名字 </div>
<div @click='changeAge'> 修改年龄 </div>
<div @click='changeSex'> 修改性别 </div>changeName(){store.commit('SET_USERNAME', 'CXY');
}changeAge(){store.commit('SET_AGE', 24);
}changeSex(){store.commit('SET_SEX', '男');
}// 使用了mapMutations
/*mapMutations同样接收两个参数：1 数组：与state保持一致2 对象，修改方法的名字
*/
methonds:{...mapMutations(['SET_USERNAME','SET_AGE','SET_SEX'])...mapMutations({setusername:'SET_USERNAME',setAge:'SET_AGE',setSex:'SET_SEX'})
}// 这样的话，直接调用即可

4. mapActions

// 与上面一致// 加入actions中定义了这些
methonds:{...mapActions(['setusername','setAge','setSex'])...mapActions({msetusername:'setusername',msetAge:'setAge',msetSex:'setSex'})
}

八 重置Vuex的state

重置state中的值的方法：
1.写一个函数getDefaultState
2.Object.assign(state, getDefaultState()) 拷贝一下对象

这个函数有两个用处：
1 初始化的使用
2 拷贝的时候用

const getDefaultState = () => {return {username:'',age:'',sex:''}
}// 初始化的时候
const state = getDefaultState()// 重置用户的时候用
const mutations = {RESET_USER(state) {Object.assign(state, getDefaultState())}
}const actions = {logOut ({ commit }) {commit('RESET_USER')},
}export default {state,getters: {},actions,mutations
}