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,actions
  modules: {
    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提交给mutations
    getUserName({ 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
}