Vuex简介：
    Vuex是一个专门为Vue.js应用程序开发的状态管理模式
        它采用集中存储管理应用组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化；
        Vuex也集成到Vue的官方调试工具Devtools，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能
如果我们不使用Vuex，那么就需要定义全局变量，但定义的全局变量不在vue的响应式系统中，我们还需要给其设置相应，很复杂，所以就有了Vuex
设置全局变量：

	const shareObj = {
		name:'pshdhx'
	}
	Vue.prototype.shareObj = shareObj;

这样不是响应式的；
那么Vue管理什么状态呢？
    在开发中，往往会遇到多个状态，在多个界面之间共享的问题；
    比如用户的登录状态，用户名称，头像，地理位置信息等；
    比如商城的收藏，购物车中的物品；
这些状态信息，我们都可以放在统一的地方，对其进行保存和管理，而且他们还是响应式的；
1、首选对Vue项目引入Vuex的包
    npm install vuex --save
2、初步建立Vuex的目录结构
    在src文件夹下新建index.js
3、在index.js中引入注册使用vuex

import Vue from 'vue'
	import Vuex from 'vuex'
	//安装vuex
	Vue.use(Vuex);
	//创建对象
	const store = new Vuex.Store({
		state:{},
		mutations:{},
		getters:{},
		actions:{},
		modules:{}
	})
	//导出store对象
	export default store

4、在main.js中注册

import store from '/store'
	new Vue({
		el:'#app',
		store,
		render:h=>h(App)
	})

初使用vuex-State,Mutations

state是存储状态变量的部分，如果想要对其进行修改，那么必须要经过Mutations（存储同步请求方法的模块），这样用Devtools插件才能够看到state中值的变化 ，方便遇到错误时调试；如果直接进行修改state中的值，那么Devtools里边的状态变量不会进行响应，只会在页面上进行响应，造成页面上的值与Devtools中的值不一致的后果，影响开发人员判断；

为什么绕一圈，才能修改state中的值，因为Actions中定义的是异步方法，Mutations中定义的是同步方法，不同的方法调用方式不同，但是最终都是通过调用Mutations中的方法进而修改State中的值；

初步使用vuex-state模块
index.js
const store = new Vuex.Store({
	state:{
		count:100
	},
	mutations:{
		increment(state){
			state.count++
		},
		decrement(state){
			state.count--
		}
	}
})
App.vue
	<button @click="addition">+</button>
	<button @click="subtration">-</button>
<script>
	methods:{
		addition(){
			this.$store.commit('increment')
		},
		subtration(){
			this.$store.commit('decrement')	
		}
	}
</script>

Vuex的核心概念

State,Getters,Mutations,Actions,Modules

State的单一状态

  我们知道，在国内我们有很多信息需要被记录，比如上学时的个人档案，工作后的社保记录，公积金记录等；

  这些信息被分散在很多地方进行管理，有一天当你需要办理户口迁入的时候，你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息，最后到一个地方提交证明你的信息无误；

而单一的状态管理就避免了这种情况，所以所有的状态变量都放在了State中进行管理；

Getters基本使用

const store = new Vuex.Store({
	State:{
		students:[
			{id:110,name:'pshdhx1',age:18},
			{id:111,name:'psdhhx2',age:20},
			{id:112,name:'pshdhx3',age:22},
			{id:113,name:'pshdhx4',age:25},
		]
	}
})

此时我们要过滤出age>20的对象；

computed:{
	moreThan20(){
		return this.$Store.state.students.filter(age=>age>=20).length;
	}
}
//如果是这样，那么在每个页面中都要定义该计算方法，但是如果定义在vuex中，那么就很方便了；
getters:{
	moreThan20(state){
		return state.students.filter(s => s.age>20).length;
	}
}
//getters中方法的参数中有state,就是index.js中的state
实际上getters中可以返回函数
moreAgeStu(state){
	return function(age){
		return state.students.filter(s=>s.age>age)
	}
	// return age => {return state.students.filter(s=>s.age>age)}
}
//App.vue
<button @click="this.$store.getters.moreAgeStu(20)"></button>

Mutations状态更新

Vuex的store状态更新的唯一方式：提交mutation

Mutation主要包含两部分：

  字符串的事件类型：type

  一个回调函数handler，该回调函数的第一个参数就是state

Mutations的定义方式
mutations:{
    state.count++    
}
通过mutation进行更新
increment:function(){
    this.$store.commit('increment');
}
App.vue
methods:{
    addCount(count){
        this.$store.commit('incremntCount',count);
    }
}
mutations:{
    incrementCount(state,count){
        state.counter+=count
    }
}
methods:{
    addStudent(){
        count stu = {id:114,name:'pshdhx5',age:'23'}
        this.$store.commit('addStudent',stu);
    }
}
addCount(count){
    this.$store.commit({
        type:'incrementCount',
        count
    });
}
//这时传递的是count对象；
Mutations:{
    incrementCount(state,payload){
        state.counter+=payload.count
    }
}
state:{
    info:{
        name:'pshdhx6',
        age:40,
        height:170
    }
}

这些属性加入到了响应式系统中，而响应式系统会监听属性的变化。当属性变化时，会通知所有界面中用到该属性的地方，让界面刷新；

updateInfo(state){
    state.info.name='pshdhx7'        //因为name在info中原本就要，所以会响应式改变；包括Devtools
    state.info['address']= '洛杉矶' //因为info中原本没有，所以Devtools不会添加此变量
}

这时需要加入到

Vue.set(state.info,'address','洛杉矶'); //这时变量就添加到了Devtools中
updateInfo(state){
    //该方法做不到响应式
    delete state.info.age
    //该方法可以做到响应式
    Vue.delete(state.info,'age')
}

如果在Mutations中使用了异步请求，那么Devtools中的变量将不会得到响应；

所以要将异步请求加入到Actions中

actions:{
    aUpdateInfo(){
        //context：上下文
        setTimeout(()=>{
            context.commit('updateInfo')
        },1000)
    }
}

这时在App.vue中要这样调用Actions中的方法

methods:{
    updateInof(){
        //this.$store.dispatch('aupdateInfo');
        this.$store.dispatch('aupdateinfo','我是payload');
        //为了可以获得异步请求的调用结果
        this.$store.dispatch('aupdateInfo',()=>{
            console.log('异步请求已经调用完成')
        })

        //也可以这样写：
        this.$store.dispatch('aupdateInfo',{
            payload:'我是携带的信息',
            success:()=>{
                console.log('异步请求已经调用完成');
            }
        })
    }
}

在Actions中我们这样写：

actions:{
    aupdateInfo(context,payload){
        setTimeout(()=>{
            context.commit('updateInfo');
            console.log(payload.message);
            payload.success();
        },1000)
    }
}

//或者用promise这样写
actions:{
    aupdateInfo(context,payload){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                context.commit('updateInfo')
                console.log(payload);
                resolve('11111');
            },1000)
        })
    }
}

因为用了在actions中用了promise，这样可以咋app.vue中调用then回调函数

this.$store.dispatch('aupdateInfo','我是携带的信息').then(res=>{
    console.log('里面完成了提交');
    console.log(res);
})

初使用Modules

module是模块的意思，为什么在Vuex中要使用模块呢？

Vue使用单一状态树，那么也就意味着很多状态都会交给Vuex来管理；

当应用变得非常复杂时，store对象就有可能变得非常臃肿；

为了解决这个问题，Vuex允许我们将store分割成模块Module，而每个模块拥有自己的state,mutations,actions,getters等；

const moduleA = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
},
const moduleB = {
    state:{},
    mutations:{},
    actions:{},
    getters:{}
},
const store = new Vuex.Store({
    modules:{
        a:moduleA,
        b:moduleB
    }
})

store.state.a  //->moduleA的状态
store.state.b  //->moduleB的状态

moduleA就是state中的一个对象；

我们可以这样使用：

{{this.$store.state.a.name}}
const moduleA = {
    state:{
        name:'pshdhx A'
    },
    mutations:{
        updateName(state,payload){
            state.name = payload
        }
    },
    actions:{},
    getters:{
        fullName(state){
            return state.name+'1111'
        },
        fullNames(state,getters){
            return getters.fullName+'2222'
        },
        funllName3(state,getters,rootState){
            return getters.fullName2+rootState.counter
        }
    }
}

App.vue

methods:{
    updateName(){
        this.$store.commit('updateName','lisi');
    }
}

<h2>{{$store.getters.fullName}}</h2>
const moduleA = {
    state:{
        name:'zhangsan'
    }，
    mutations:{
        updateName(state,payload){
            state.name = payload
        }
    },
    actions:{
        aupdateName(context){
            setTimeout(()=>{
                context.commit('updateName','wangwu');
            },1000)
        }
    }
}

App.vue
methods:{
    asyncUpdateName(){
        this.$store.dispatch('aupdateName');
    }
}

dispatch对象

actions的写法

const moduleA = {
    actions:{
        increment({state,commit,rootState}){
            if((state.count+rootState.count)%2===1){
                commit('increment')
            }
        }
    }
}

如果getters中也需要使用全局的状态，可以接受更多的参数

const moduleA = {
    getters:{
        withRootCount(state,getters,rootState){
            return state.count = rootState.count
        }
    }
}

vuex的项目结构

引入文件的时候注意：

如果是export的是default，那么可以直接import .. from '..';
如果不是，那么需要import {...} from '..';


import mutations from './mutations'
import actions from './actions'
import getters from './getters'

const store = new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

 

# vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue