vue vuex状态管理模式

		vuex是什么？
			是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。

1.使用在src文件中创建store文件，然后再文件中创建index.js文件然后把下列代码引入

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
	//存放的内容所有组件都可以访问,类似于data
	name:"张三'
	},
  mutations: {},
  actions: {},
  modules: {},
});

vuex中有几个方法state，mutation，action，getter，modules

state：提供唯一的公共数据源,所有共享数据都要统一放到Store的State中进行存储

组件访问State中的数据有两种方法：

第一种
this.$store.state.全局数据名称
this.$store.state.name

第二种
1.从vuex 中按需导入mapState 函数
import {mapState} from "vuex"  
2.通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed:{
	...mapState(['name'])
}

注意在其他方法中不要直接修改state里面的属性,想要修改请使用Mutation。

mutation：用于变更Store中的数据，提交更新数据的方法,必须是同步的(如果需要异步使用action)，只能通过mutation变更store数据,不可以直接操作Store中的数据，通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化

组件访问mutation中的数据有两种方法：

//定义mutation
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
	//第一个参数是state对象
		add(state){
		//变更状态
		state.count++
	}
	}
})




//触发mutation
methods:{
	aa(){
		//add是mutation里面的方法
		this.$store.commit('add',)
	}
}

1.从 vuex中按需导入mapMutations 函数

import {mapMutations} from 'vuex'

2. 将制定的mutations函数,映射为当前组件的methods函数中
3. methods:{
	...mapMutations(['add','ooo'])
}

action：和mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作，用于处理异步任务，如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据

//定义action
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state){
		state.count++
	}
	},
actions:{
//第一个参数是context
	addAsync(context){
		setTimeout(()=>{
		context.commit('add')
},1000)
	}
}
})

使用方式：

methods:{
	abc(){
		//addAsynce 是actions里面的方法
		this.$store.dispatch('addAsynce')
	}
}

1.从 vuex中按需导入mapActions 函数

import {mapActions} from 'vuex'

2. 将制定的mapActions函数,映射为当前组件的methods函数中
methods:{
	...mapAction(['addAsync'])
}

getter：从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法，会返回一个新数据,不会影响到state里面的老数据，store中的数据发生变化.getter的数据也会跟着变化

使用方式：

第一种使用方式  this.$store.getters.userId1

第二种
import {mapGetters} form 'vuex'
computed:{
	...mapGetters(['userId'])
}

modules：模块化vuex，可以让每一个模块拥有自己的state,mutation,action,getters,使得结构非常清晰,方便管理
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：