vuex最后的总结

---

「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。

---

上一篇简单的和大家介绍了关于，在本篇我会给大家介绍一下关于vue中关于vuex的部分基本上已经说玩了，如果后续vue可能存在版本更替技术迭代等等的事情，后面我也是会继续和大家分享关于我掌握的这部分技术。开始我们本篇的总结，在我看来感觉上vuex就是把平时在写vue项目中的script标签的大部分代码给提了出去，当然不只是提了出去还把他共享了出去。

本来呢是这样的

现在呢是这样的

下面我就和大家讲讲这就vuex的主要的内容如：

搭建vuex环境

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

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state
   })
   

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

   ......
   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
   

四个map方法

mapActions 方法生成关于actions文件中的数据

mapMutations 方法生成关于mutations文件中的数据

mapState 方法生成关于state文件中的数据

mapGetters 方法生成关于 getters 文件中的数据

主要当不使用mapGetters方法操作getters的时候 想触发里面的东西需要在路径中加 / 例如： return this.$store.getters['personAbout/firstPersonName']而其它就是return this.$store.state.xxx

xuex模块化和命名空间

：需要在每个模块的配置中添加namespaced:true,

//求和相关的配置
export default {
	namespaced:true,
	actions:{
		·····
	},
	mutations:{
		·····
	},
	state:{
		·····
	},
	getters:{
                ·····
	},
}

引入的时候添加一个 modules模块 在其它组件获取时候

第一种方式 ：this.$store.state.personAbout.personList

第二中方式 ： ...mapState('personAbout',['personList']),

以及在index人口引入
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})