vue入门学习知识要点总结（九），Vue在脚手架的使用，vuex的使用与理解

接上一篇文章继续总结Vue的入门知识，这里主要是关于在脚手架中vuex的使用和理解。

vuex

1.概念

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

​ Github 地址: https://github.com/vuejs/vuex

2.何时使用

​ 多个组件需要共享数据时（即多个组件依赖于同一状态，来自不同组件的行为需要变更同一状态）

3.Vuex 工作原理

​

state：vuex 管理的状态对象，它应该是唯一的 。

getters：值为一个对象，包含多个用于返回数据的函数

actions：值为一个对象，包含多个响应用户动作的回调函数

1. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state

2. 如何触发 actions 中的回调？ 在组件中使用: $store.dispatch(‘对应的 action 回调名’) 触发

3. 可以包含异步代码（定时器, ajax 等等）

mutations：值是一个对象，包含多个直接更新 state 的方法

1. 谁能调用 mutations 中的方法？如何调用？ 在 action 中使用：commit('对应的 mutations 方法名')触发
2. mutations 中方法的特点：不能写异步代码、只能单纯的操作 state

backend API：服务器等与actions直接交流

Devtools：调试工具与mutations直接交流

3.搭建vuex环境

1. 创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   
    //准备state对象——存储数据
   const state = {}
   //准备mutations对象——操作数据(state)
   const mutations = {}
    //准备actions对象——响应组件中的动作
   const actions = {}
   //准备getters对象——用于将state中的数据进行加工
   const getters = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
       getters
   })
   

2. 在main.js中创建vm时传入store配置项

   ......
   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	//注册仓库：组件实例身上会多一个属性$store属性
   	store
   })
   

4.基本使用

1. 操作文件src/store/index.js文件，初始化数据、配置actions、配置mutations，配置state，配置getters。示例如下：

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引入axios
   import axios from 'axios'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
   	jia(context,value){ //context为上下文，value为组件传递的参数（若服务器需要则可以省略该参数）
   		// console.log('actions中的jia被调用了',miniStore,value)
   		context.commit('JIA',value)
   	},
       //需要服务器请求时
       jiaAjax(context){
           axios.get('xxxurl').then(response=>{
               context.commit('JIA',response.data)
           },error=>{
               alert(error.message)
           })
       }
   }
   
   const mutations = {
       //执行加
   	JIA(state,value){ //state为store的状态，value为commit传递的参数
   		// console.log('mutations中的JIA被调用了',state,value)
   		state.sum += value
   	}
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //对数据进行处理
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
       getters
   })
   

2. 组件中读取vuex中的数据：$store.state.sum，$store.getters.bigSum

3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

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

5.四个map方法的使用

​ 即vuex提供的省略写法。一般在组件中使用（需要在组件提前引入，例如import {mapState} from 'vuex）

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },
   

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
       
       //等同于自己写的方法
       //bigSum(){
   		return this.$store.getters.bigSum
   	}
   },
   

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   //模板中使用mapActions方法的简写有需要时带有传递的参数，eg:incrementOdd(n)
   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
   

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   //模板中使用mapMutations方法的简写有需要时带有传递的参数，eg:increment(n)
   methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //等同于自己写的方法
       increment(){
           this.$store.commit('JIA',this.n)//n在vm的data中
       }
   }
   

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

6.模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。

2. 修改store.js

   const countAbout = {
     namespaced:true,//开启命名空间
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//开启命名空间
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })
   

3. 开启命名空间后，组件中读取state数据：

   //方式一：自己直接读取
   this.$store.state.personAbout.list
   //方式二：借助mapState读取：
   ...mapState('countAbout',['sum','school','subject']),
   

4. 开启命名空间后，组件中读取getters数据：

   //方式一：自己直接读取
   this.$store.getters['personAbout/firstPersonName']
   //方式二：借助mapGetters读取：
   ...mapGetters('countAbout',['bigSum'])
   

5. 开启命名空间后，组件中调用dispatch

   //方式一：自己直接dispatch
   this.$store.dispatch('personAbout/addPersonWang',person)
   //方式二：借助mapActions：
   ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   

6. 开启命名空间后，组件中调用commit

   //方式一：自己直接commit
   this.$store.commit('personAbout/ADD_PERSON',person)
   //方式二：借助mapMutations：
   ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
   

在工程模块化中，可以将每个store拆分为一个单个的js文件，如在src中创建count.js，person.js，开启命名空间后，通过es6的export default {...}暴露，然后在store / index.js中引入并使用即可。

本文参考了vue官方文档和尚硅谷张天禹老师的vue教程及资料。

欢迎交流