(vue)Vuex

Vuex

认识Vuex

Vuex是一个专为vue.js应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可以预测的方式发生改变

状态管理模式

状态管理模式、集中式存储管理

可以简单的看做：把需要多个组件共享的变量全部存储到一个对象当中；然后将这个对象放到顶层的Vue实例当中，让其他组件可以使用

一般什么会放到Vuex中

• 状态需要在页面之间共享的
  比如：登录状态、用户名、头像、地理位置信息
  比如：购物车信息

vuex内容解析

官方文档：https://vuex.vuejs.org/zh/guide/

state

存放变量

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation；类似于事件。

尽量不要再mutations中进行异步操作。

将mutations方法名修改成为常量

新建mutations_type.js用来存储静态变量

store.js中mutations

方法的定义也可以使用如下这种方式

[静态变量](参数)
{
	//方法体
}

actions

对state进行异步操作

基本用法

actions代码段

actions:{
	        aupdatePerson(context,payload){
	            setTimeout(() => {
	                context.commit("updatePerson");
	                console.log(payload.message);
	                payload.success();
	            }, 1000);
	        }
		}

Vue方法代码段

            this.$store.dispatch('aupdatePerson',{
                message:'携带的信息',
                success:()=>{
                    console.log("异步完成")
                }
            })

使用promise

actions:{
	        aupdatePerson(context,payload){
	            return new Promise((resolve,reject)=>{
	                setTimeout(() => {
	                    context.commit('updatePerson')
	                    console.log(payload);
	                    resolve("promise中传递数据")
	                }, 1000);
	            })
	        }
        }

Vue代码段

            this.$store.dispatch('aupdatePerson',"异步携带的信息").then(res=>{
                console.log("异步完成");
                console.log(res);
            })