Vuex的基本使用

1.概念

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

2.何时使用

多个组件需要共享数据时

3.搭建vuex环境

1. 创建vuex的js文件

import Vuex from 'vuex'

import Vue from 'vue'

 

Vue.use(Vuex)

 

// 响应组件中用户的动作

const actions = {}

// 修改state中的数据

const mutations = {}

// 保存具体的数据

const state = {}

 

// 创建并暴露Store

export default new Vuex.Store({

  actions,

  mutations,

  state

})

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

............

// 引入 store

import store from './store/index'

............

 

// 配置到vm对象中

new Vue({

  render: h => h(App),

  store

}).$mount('#app')

4.基本使用

1.初始化数据，配置actions，mutations，操作文件store.js

import Vuex from 'vuex'

import Vue from 'vue'

 

Vue.use(Vuex)

 

// 响应组件中用户的动作

const actions = {

  jia(context, value) {

    context.commit('JIA',value)

  },

  jian(context, value) {

    context.commit('JIAN',value)

  },

  jiaOdd(context, value) {

    if(context.state.sum % 2) {

      context.commit('JIA',value)

    }

  },

  jiaWait(context, value) {

    setTimeout(() => {

      context.commit('JIA',value)

    },500)

  },

}

// 修改state中的数据

const mutations = {

  JIA(state,value) {

    state.sum += value

  },

  JIAN(state,value) {

    state.sum -= value

  }

}

// 保存具体的数据

const state = {

  sum: 0

}

 

// 创建并暴露Store

export default new Vuex.Store({

  actions,

  mutations,

  state

})

组件中读取vuex中的数据：$store.state.sum

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

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

5.getters的使用

概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

在store.js中追加getters配置

const getters = {

  bigSum(state) {

    return state.sum * 10

  }

}

 

export default new Vuex.Store({

  ......

  getters

})

组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

1.mapState方法：用于帮助我们映射 state 中的数据为计算属性，方便模板中插值简写

computed: {

  // 借助mapState生成计算属性（对象写法）

  ...mapState({sum:'sum',school:'school',subject:'subject'}),

  

  // 借助mapState生成计算属性（数组写法）

  ...mapState(['sum','school','subject']),

}

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

computed: {

  // 借助mapGetters生成计算属性（对象写法）

  ...mapGetters({bigSum:'bigSum'}),

  

  // 借助mapGetters生成计算属性（数组写法）

  ...mapGetters(['bigSum']),

}

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

methods: {

  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）

  ...mapActions({ incrementOdd: 'jiaOdd', incrementWait: 'jiaWait' }),

  

  // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组写法）

  // 必须methods中方法名和 mutations 中的方法名一致才能以下写法

  // ...mapActions(['jiaOdd','jiaWait'])

}

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

methods: {

  // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象写法）

  ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),

  

  // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组写法）

  // 必须methods中方法名和 mutations 中的方法名一致才能以下写法

   ...mapMutations(['JIA','JIAN']),

}

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

7.模块化+命名空间

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

1.修改 store.js

const countAbout = {

  namespaced:true, // 开启命名空间

  state: { x: 1 },

  mutations: { ... },

  actions: { ... },

  getters: {

    bigSum(state) {

      return state.sum * 10

    }

  }

}

 

const personAbout = {

  namespaced:true, // 开启命名空间

  state: { x: 1 },

  mutations: { ... },

  actions: { ... },

}

 

const store = new Vuex.Store({

  modules: {

    countAbout,

    personAbout

  }

})

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

// 方式一：自己直接读取

this.$store.state.personAbout.list

// 方式二：借助mapState读取

...mapState('countAbout',['sum','school','subject'])

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

// 方式一：自己直接读取

this.$store.getters['personAbout/firstPersonName']

// 方式二：借助mapGetters读取

...mapGetters('countAbout',['bigSum'])

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

// 方式一：自己直接调用dispatch

this.$store.dispatch('personAbout/addPersonWang',person)

// 方式二：借助mapActions

...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

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

// 方式一：自己直接调用commit

this.$store.commit('personAbout/ADD_PERSON',person)

// 方式二：借助mapMutations

...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

8.模块式开发

总仓库

import Vue from 'vue'

import Vuex from 'vuex'

// 引入小仓库

import home from './home/index'

import search from './search/index'

 

Vue.use(Vuex)

 

export default new Vuex.Store({

  modules: {

    home,

    search

  }

})

home 小仓库

const state = {

  count: 2

}

// 处理action

const actions = {

  add({ commit }) {

    commit('ADD')

  }

}

// 修改state的数据

const mutations = {

  ADD(state) {

    state.count++

  }

}

// 理解为计算属性

const getters = {}

 

export default {

  state,

  actions,

  mutations,

  getters

}

search 小仓库

// 存储数据

const state = {

  count: 2

}

// 处理action

const actions = {

  add({ commit }) {

    commit('ADD')

  }

}

// 修改state的数据

const mutations = {

  ADD(state) {

    state.count++

  }

}

// 理解为计算属性

const getters = {}

 

export default {

  state,

  actions,

  mutations,

  getters

}