持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

Vuex是什么？

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

什么时候使用Vuex呢？

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

Vuex原理图

搭建Vuex环境

1.下载vuex命令npm install vuex

2.创建文件src/store/index.js该文件用于创建Vuex中最为核心的store

import Vue from 'vue'
import Vuex from 'vuex' //引入Vuex
Vue.use(Vuex)//应用Vuex插件
export default new Vuex.Store({
  state: {},//准备state储存数据
  mutations: {}//准备mutations用于操作(state)数据
})

3.在src/manin.js中创建vm时传入store配置项

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'//引入store

Vue.config.productionTip = false

new Vue({
  router,
  store,//配置项添加store
  render: h => h(App)
}).$mount('#app')

Vuex的基本使用

1.初始化state，配置，配置actions，mutations，操作文件store.js 2.组件中读取vuex中的数据$store.state数据 3.组件中修改vuex中的数据$store。dispatch('action中的方法名'，数据)或$store.commit('mutations中的方法名'，数据)若没有网络请求或者其他业务逻辑，组件中也可以越过actions，即不写dispatch，之间编写commit

getters配置项

1.当state中的数据需要经过加工后再使用时，可以使用getters加工，相当于全局计算属性

2.在store.js中追加getters配置

.........

const getters = {
  bigSum(state){
      return state.sum * 10
      }
   }
   //创建并暴露store
export default new Vuex.Store({
 ......
 getters
})

3.组件中读取数据$store.getters.biSum

四个map方法的使用

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

  methods:{
	  //借助mapState生成计算属性：sum，school，subject(对象写法一)
	  ...mapState({sum:'sum',school:'school',subject:'subject'}),
	  //借助mapState生成计算属性：sum，school，subject(数组写法二)
	 ...mapState({'sum','school','subject'}) 
  }

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

  methods:{
	  //借助mapGetters生成计算属性bigSum(对象写法一)
	  ...mapGetters({bigSum:'bigSum'}),
	  //借助mapState生成计算属性：bigSum(数组写法二)
	 ...mapGetters({'bigSum'}) 
  }

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

  methods:{
	  //借助mapActions生成计算属性incrementOdd,incrementWait(对象形式)
	  ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
	  //借助mapActions生成计算属性：incrementOdd(数组形式)
	 ...mapActions({'jiaOdd','jiaWait'}) 
  }

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

  methods:{
	  //借助mapMutations生成计算属性increment,decrment(对象形式)
	  ...mapActions({increment:'JTA',decrment:'JIAN'}),
	  //借助mapMutations生成计算属性：JTA,JIAN(数组形式)
	 ...mapActions({'JTA','JIAN'}) 
  }

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

你知道吗？Vuex