Vuex

Vuex官网

1.概念

  1. 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

何时使用？

  1. 多个组件需要共享数据时

S：Vuex - 图1

2.搭建vuex环境

  1. 创建文件：src/store/index.js
  1. //引入Vue核心库
  2. import Vue from 'vue'
  3. //引入Vuex
  4. import Vuex from 'vuex'
  5. //应用Vuex插件
  6. Vue.use(Vuex)
  8. //准备actions对象——响应组件中用户的动作
  9. const actions = {}
  10. //准备mutations对象——修改state中的数据
  11. const mutations = {}
  12. //准备state对象——保存具体的数据
  13. const state = {}
  15. //创建并暴露store
  16. export default new Vuex.Store({
  17.   actions,
  18.   mutations,
  19.   state
  20. })
  1. 在main.js中创建vm时传入store配置项
  1. //引入store
  2. import store from './store'
  3. //创建vm
  4. new Vue({
  5.   el:'#app',
  6.   render: h => h(App),
  7.   store
  8. })

3.基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js
  1. //引入Vue核心库
  2. import Vue from 'vue'
  3. //引入Vuex
  4. import Vuex from 'vuex'
  5. //应用Vuex
  6. Vue.use(Vuex)
  7. const actions = {    
  8.   //响应组件中加的动作    
  9.   jia(context,value){        
  10.     // console.log('actions中的jia被调用了',miniStore,value)
  11.     context.commit('JIA',value)
  12.   },
  13. }
  14. const mutations = {
  15.   //执行加
  16.   JIA(state,value){
  17.     // console.log('mutations中的JIA被调用了',state,value)
  18.     state.sum += value
  19.   }
  20. }
  21. //初始化数据
  22. const state = {
  23.   sum:0
  24. }
  25. //创建并暴露store
  26. export default new Vuex.Store({
  27.   actions,
  28.   mutations,
  29.   state
  30. })
  1. 组件中读取vuex中的数据：$store.state.sum
  2. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或
    $store.commit('mutations中的方法名',数据)

    备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

4.getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
  2. 在store.js中追加getters配置 
  1. ......
  2. const getters = {
  3.   bigSum(state){
  4.     return state.sum * 10
  5.   }
  6. }
  7. //创建并暴露store
  8. export default new Vuex.Store({
  9.   ......
  10.   getters
  11. })
  1. 组件中读取数据：$store.getters.bigSum

5.四个map方法的使用

当我们要使用很多state中的数据时，老是写很长一串还很多时，就可以使用计算属性来简便书写，除了我们自己手写外，还可以利用vuex提供的API

在使用前需要导入相应的模块：import {mapState,....} from "vuex"

  1. mapState方法：用于帮助我们映射state中的数据为计算属性
  1. computed: {
  2.     //借助mapState生成计算属性：sum、school、subject（对象写法，可以不同名）
  3.     ...mapState({sum:'sum',school:'school',subject:'subject'}),
  5.     //借助mapState生成计算属性：sum、school、subject（数组写法：同名情况下）
  6.     ...mapState(['sum','school','subject']),
  7. }
  1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
  1. computed: {
  2.     //借助mapGetters生成计算属性：bigSum（对象写法）
  3.     ...mapGetters({bigSum:'bigSum'}),
  4.     //借助mapGetters生成计算属性：bigSum（数组写法）
  5.     ...mapGetters(['bigSum'])
  6. }
  1. mapActions方法：用于帮助我们生成与actions对话的方法
    即：包含$store.dispatch(xxx)的函数
  1. methods:{
  2.     //靠mapActions生成：incrementOdd、incrementWait（对象形式）
  3.     ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
  5.     //靠mapActions生成：incrementOdd、incrementWait（数组形式：同名情况）
  6.     ...mapActions(['jiaOdd','jiaWait'])
  7. }
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法
    即：包含$store.commit(xxx)的函数
  1. methods:{
  2.     //靠mapActions生成：increment、decrement（对象形式）
  3.     ...mapMutations({increment:'JIA',decrement:'JIAN'}),
  4.     //靠mapMutations生成：JIA、JIAN（对象形式）
  5.     ...mapMutations(['JIA','JIAN'])
  6. }

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。<button @click="increment(n)">点击</button>

6.模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。
  2. 修改.src/store/index.js 
  1. const countAbout = {
  2.   namespaced:true,//开启命名空间
  3.   state:{x:1},
  4.   mutations: { ... },
  5.   actions: { ... },
  6.   getters: {
  7.     bigSum(state){
  8.         return state.sum * 10
  9.     }
  10.   }
  11. }
  13. const personAbout = {
  14.   namespaced:true,//开启命名空间
  15.   state:{ ... },
  16.   mutations: { ... }, 
  17.   actions: { ... }
  18. }
  20. const store = new Vuex.Store({
  21.      //导入模块
  22.   modules: {
  23.        countAbout,
  24.     personAbout
  25.   }
  26. })
  1. 开启命名空间后，组件中读取state数据：
  1. //方式一：自己直接读取
  2. this.$store.state.personAbout.list
  3. //方式二：借助mapState读取：在computed中
  4. ...mapState('countAbout', ['sum','school','subject']),
  1. 开启命名空间后，组件中读取getters数据：
  1. //方式一：自己直接读取
  2. this.$store.getters['personAbout/firstPersonName']
  3. //方式二：借助mapGetters读取：
  4. ...mapGetters('countAbout', ['bigSum'])
  1. 开启命名空间后，组件中调用dispatch
  1. //方式一：自己直接
  2. dispatchthis.$store.dispatch('personAbout/addPersonWang',person)
  3. //方式二：借助mapActions：
  4. ...mapActions('countAbout', {incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  1. 开启命名空间后，组件中调用commit
  1. //方式一：自己直接commit
  2. this.$store.commit('personAbout/ADD_PERSON',person)
  3. //方式二：借助mapMutations：
  4. ...mapMutations('countAbout', {increment:'JIA',decrement:'JIAN'}),

如果功能很多，还可以把各自的功能才分为模块，最后再导入index.js中