Vuex学习笔记

1.安装vuex （共享数据 状态）

安装：npm i vuex
vue2版本对应vuex3版本
vue3版本对应vuex4版本
版本不对应就会出现如下错误：

2.配置环境

1.在src目录下创建store文件夹，在store下创建index.js文件

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	//定义方法
	 function(context,value){
		console.log('actions中的function被调用了')
		context.commit('FUNCTION',value)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	FUNCTION(state,value){
		console.log('mutations中的FUNCTION被调用了')
	}
}
//准备state——用于存储数据
const state = {
	num:0 
}

//需要用到再定义，并再Store中暴露
//准备getters——用于将state中的数据进行加工
const getters = {
	num2(state){
		return state.num*10+2
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

2.在main.js里引入store：import store from ‘./store’

3.在组件中使用 mapState与mapGetters，mapMutations与mapActions 生成state中的计算属性和Mutations与Actions中的计算属性

先在script中引入

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

使用如下：

computed:{
	//靠程序员自己亲自去写计算属性
	/* sum(){
		return this.$store.state.sum
	},
	school(){
		return this.$store.state.school
	},
	subject(){
		return this.$store.state.subject
	}, */

	//借助mapState生成计算属性，从state中读取数据。（对象写法）
	// ...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),

	//借助mapState生成计算属性，从state中读取数据。（数组写法）
	...mapState(['sum','school','subject']),

	/* ******************************************************************** */

	/* bigSum(){
		return this.$store.getters.bigSum
	}, */

	//借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
	// ...mapGetters({bigSum:'bigSum'})
	
	//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
	...mapGetters(['bigSum'])

},
methods: {
	//程序员亲自写方法
	/* increment(){
		this.$store.commit('JIA',this.n)
	},
	decrement(){
		this.$store.commit('JIAN',this.n)
	}, */

	//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
	...mapMutations({increment:'JIA',decrement:'JIAN'}),

	//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
	// ...mapMutations(['JIA','JIAN']),

	/* ************************************************* */

	//程序员亲自写方法
	/* incrementOdd(){
		this.$store.dispatch('jiaOdd',this.n)
	},
	incrementWait(){
		this.$store.dispatch('jiaWait',this.n)
	}, */

	//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
	...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

	//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
	// ...mapActions(['jiaOdd','jiaWait'])
},

3.模块化+命名空间

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'}),