vue教程——13 Vuex
一 什么是Vuex？二 vuex核心组成模块三 vuex初体验四 getter用法----------怎么获取state中的值呢？(B组件怎么获取并监听state的值呢？)五 mutaitions用法----------怎么改变state中的值呢？(A页面怎么改变state的值呢？)六 modules模块化七 语法糖 ：对操作大量state、getter、mutations、actions的简写八 重置Vuex的state一 什么是Vuex？
说白了，就是
多个页面共同维护一组数据的状态。比如有一组数据dataS；A页面改变了这组数据，B页面此时也需要监听到这组数据的变化，随之做出自己的处理。
例如，A页面修改了用户名，B页面这个时候也需要监听到用户名的修改并渲染到页面上。以上的例子，我们知道的动作有：
A页面改变数据B页面拿到数据并监听数据，其实这些就是vuex的操作。
二 vuex核心组成模块
State ：定义了存放的数据。就是上面的dataSGetter：让组件获取state中的值(dataS)，就是B页面获取值并监听的时候，我们通过这个获取值Mutation：修改state中的值，就是A页面要修改值， 就用这个方法。这个方法里面必须是同步函数Action：用于提交Mutation，这里可以进行异步操作。说白了就是异步操作以后，调用Mutation，修改State中的值。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(){mit('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// mit提交给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的简写
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})}
mapGetters
// 与mapState用法一致// 假设这些东西，getter中已经定义好了computed: {...mapGetters(['username','age','sex'])// 语法糖，简写。...mapState({stateName:state=>state.username,stateAge:state=>state.age,stateSex:state=>state.sex})}
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(){mit('SET_USERNAME', 'CXY');}changeAge(){mit('SET_AGE', 24);}changeSex(){mit('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'})}// 这样的话，直接调用即可
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}
