vue-cli脚手架的vuex共享状态

在vue-cli脚手架中有个vuex共享状态它可以方便的实现多组件之间的数据共享共享

import Vue from 'vue'
import Vuex from 'vuex' //引入vuex

Vue.use(Vuex) // 调用vuex

export default new Vuex.Store({ // 暴露出实例化后的vuex
  state: {
  	num:1
  },
  mutations: {
  setNum (state, data) {
      state.num = data
    }
  },
  actions: {
  },
  getters:{
  	changeNum(state){
  			return state.num++
  		}
  },
  modules: {
  }
})

在store中有五个模块
vue在入口文件main.js中引入store

import store from './store' // 引入store
new Vue({
  store,// 在这里进行实例化 在组建的this上添加$store属性
  render: h => h(App)
}).$mount('#app')

1.state模块
在这个模块中存放的都是一些共享的状态，在每一个组件中都能通过

this.$store.state.num

来进行调用里面的共享数据 这样就能够在一个组件里面使用这个状态。并且还能实现组件之间的通信，一旦一个组件把这个状态改变了那么另一个也使用这个状态的组件也会进行重新渲染
2.getters模块
这个模块相当与在vue里面的computed计算属性，他是把state里面的状态重新派发一个新的状态出来

this.$store.getters.changeNum // 在组件中这样调用getters的状态

3.mutations模块
这个模块是专门用来更改state里面的状态，因为能够更好被devtool等一些插件检测到数据的变化，有利于开发者进行调试和查看

this.$store.commit('setNum',数据) // 如果需要共享状态改变在组件中调用mutations里面方法

4.actions 模块
在这里更倾向于做一些异步的操作，如ajax
在组建中如果使用

this.$store.dispatch('actions里面的方法') // 调用action方法

如果这个方法封装了一个ajax的请求我们可以在vue生命周期created钩子函数里面进行调用

getNewNum ({ commit }) { // 在这里通过对象的解构来得到store里面的commit方法
      axios.get("url地址"}).then(res => {
         commit('setNum', res) // 通过commit就能够调用mutations里面的方法 并且把请求来的数据传递过去 这样最终state里面的状态就会改变
      })
    }

5.module模块
由于当项目有多个不同功能的共享状态时，把所有的状态都放在一个文件中会显得非常的乱，不易查找，因此就实现了多模块的状态，把不同的功能放进不同的模块

//影院模块
const module = {
  namespaced: true, // 开启命名空间 需要开启才能被找到
  state: {
    cinemaList: [] // 初始的共享状态
  },
  getters: { 
  },
  actions: {
    
  },
  mutations: {
}
export default module // 将这个模块暴露出去

// 美食模块
const module = {
  namespaced: true, // 开启命名空间 需要开启才能被找到
  state: {
    foodList: [] // 初始的共享状态
  },
  getters: { 
  },
  actions: {
    
  },
  mutations: {
}
export default module // 将这个模块暴露出去

import Vue from 'vue'
import Vuex from 'vuex'
import food from './module/foodmodule' // 引入你分好的模块路径
import cinema from './module/cinemamodule'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: { //在stroe文件下面的index.js文件中进行模块的实例化
    food, 
    cinema
  }
})

这样在组件中使用的时候加上模块的名字就能够调用

由于调用的代码过于长所以vuex也提供了辅助函数

import {mapState,mapMutations,mapActions,mapGetters} from 'vuex' //引入辅助工具
export default{
	computed:{
	// 第一个参数时模块的名字 必须在模块内开启命名空间
	// 第二个参数是一个数组，里面放状态或者方法，在组件中通过this.方法或状态就能够使用
	// mapState和mapGetters 需要在computed里面使用
	// mapActions和mapMutations 需要在methods里面使用
	// 这些辅助工具返回的时一个对象，因此需要用展开运算符...对其进行展开
		...mapState('food',["foodlist"]), 
		...mapGetters('food',["方法名"])
	},
	methods:{
	...mapActions('food',["方法名"]),
	...mapMutations('food',["方法名"])
	}
}