Vuex使用总结

基础版

一、仓库

1.主仓库

// store/index.js
import Vue from "vue";
import Vuex from "vuex";

// 引入子仓库
import home from './modules/home.js'

Vue.use(Vuex);

const state = { //要设置的全局访问的state对象,赋予初始属性值
  index: 'home',
  isIndex: false,
};

const getters = {   //实时监听state值的变化(最新状态)
  getIsIndex(state) {  //定义函数，返回处理过的val，命名最好有代表性
    return window.location.hash.split('/')[1] === state.index
  },
};

const mutations = {
  //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
  // clearCatch(state, val) {
  //   console.log(state, val)
  // },
};

const actions = {
  //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
  // clearCatchAction(context, val) {
  //   context.commit('clearCatch', val);
  // },

};

export default new Vuex.Store({
  strict: true, // 此模式下所有的状态变更（即更新state）必须使用mutation
  state,
  getters,
  mutations,
  actions,
  modules: {
    home
  }
});

2.子仓库

namespaced为true时才是代码和逻辑上的子仓库，否则仅是代码上的子仓库

// store/modules/home.js

const state = {
 
};

const getters = {
   
};

const mutations = {
   
};

const actions = {
    };

// 注意和仓库的区别
const store = {
    // namespaced用于在全局引用此文件里的方法时标识这一个的文件名，使得让人明白这些数据来自哪个仓库
    // 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时，里面的方法需要注明来自哪一个模块的方法
    // 若未设置默认是false，即子仓库的数据也视为全局仓库中的数据，此时的‘子仓库’仅仅是代码上的分割
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}
export default store;

二、使用

1.全局（index.js和未开启命名空间的子仓库）

this.$store.state.isIndex

this.$store.getters.getIsIndex

this.$store.commit(‘clearCatch’,‘all’)

this.store.dispatch(‘clearCatchAction’,‘all’)

2.子仓库（子仓库定义了namespaced: true），仓库名：home

this.$store.state.home.isIndex

this.$store.getters[‘home/getIsIndex’]

this.$store.commit(‘home/clearCatch’,‘all’)

this.store.dispatch(‘home/clearCatchAction’,‘all’)

3.使用strict严格模式（建议）

export default new Vuex.Store({
  strict: true,// 此模式下所有的状态变更（即更新state）必须使用mutation
  state: {
    ...
  },
  ...
}

此模式下所有的状态变更（即更新state）必须使用mutation（commit），如果在组件中直接修改state则会报错。这样的好处是所有的state的更新都体现在仓库中，整改方便；使用devTools调试工具时可以跟踪到状态的修改。

三、批量使用

1、全局

1.sate的辅助函数

一般是写在computed里面

mapState(*)

数组映射

 computed: {
      // 3. mapState需要接收数组作为参数，数组的元素是需要映射的状态属性
      // 会返回一个对象，包含两个对应属性计算的方法
      // { count: state => state.count, msg: state => state.msg }
      // 然后这里使用扩展运算符展开对象，完成之后我们就有了count和msg两个计算属性
      ...mapState(['count', 'msg'])
    }

字典映射（可起别名防止冲突）

computed: {
    // mapState可以传对象，键是别名，值是映射的状态属性
    ...mapState({ num: 'count', msg:'msg' })
  }

获取数据时进一步处理

...mapState({  
         msg:state=>state.msg + '。'
      }),

映射后使用：this.msg

2.getters的辅助函数

一般也是写在computed里面

mapGetters(*)

数组映射

 computed: {
      ...mapGetters(['getCount', 'getMsg'])
    }

字典映射（可起别名防止冲突）

computed: {
    ...mapGetters({ num: 'getCount', getMsg:'getMsg'})
  }

映射后使用：this.getMsg

3.mutations的辅助函数

一般是写在methods里面

mapMutations(*)

数组映射

 ...mapMutations(['clearCatch'])

字典映射

 ...mapMutations({clear:'clearCatch'}])

映射后使用：this.clearCatch(‘all’)

4.actions的辅助函数

一般也是写在methods里面

mapActions(*)

数组映射

 ...mapActions(['clearCatchAction'])

字典映射

 ...mapActions({clearAction:'clearCatchAction'}])

映射后使用：this.clearCatchAction(‘all’)

2、子仓库

同上，只是第一个参数是子仓库名称（并且子仓库namespaced为true时）

1.sate的辅助函数

mapState(‘name’,*)

数组映射

 computed: {
      ...mapState('home',['count', 'msg'])
    }

字典映射（可起别名防止冲突）

computed: {
    ...mapState('home',{ num: 'count', msg:'msg' })
  }

获取数据时进一步处理

...mapState('home',{  
         msg:state=>state.msg + '。'
      }),

映射后使用：this.msg

2.getters的辅助函数

一般也是写在computed里面

mapGetters(‘name’,*)

数组映射

 computed: {
      ...mapGetters('home',['getCount', 'getMsg'])
    }

字典映射（可起别名防止冲突）

computed: {
    ...mapGetters('home',{ num: 'getCount', getMsg:'getMsg'})
  }

映射后使用：this.getMsg

3.mutations的辅助函数

一般是写在methods里面

mapMutations(‘name’,*)

数组映射

 ...mapMutations('home',['clearCatch'])

字典映射

 ...mapMutations('home',{clear:'clearCatch'}])

映射后使用：this.clearCatch(‘all’)

4.actions的辅助函数

一般也是写在methods里面

mapActions(‘name’,*)

数组映射

 ...mapActions('home',['clearCatchAction'])

字典映射

 ...mapActions('home',{clearAction:'clearCatchAction'}])

映射后使用：this.clearCatchAction(‘all’)