这篇文章给大家分享的是有关vuejs如何实现全局状态管理的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
在vuejs中可以利用vuex实现全局状态管理;Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用来管理全局数据,可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
Vuex
是一个专为Vue.js
应用程序开发的状态管理模式。可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。
通俗的来说vuex就是全局数据管理,用来管理全局数据的,vue原本的数据管理只能父子组件之间传递数据,并且不方便,使用vuex可以进行全局数据管理,将所有数据存储到vuex中,使用时调用。
vuex的核心:
state
mutations
actions
getter
安装并使用vuex
安装
1.在项目中进行安装
npm install vuex --save
2.新建一个store.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
//存放初始数据
count: 0
},
mutations: {
//存放修改数据的方法
increment (state) {
state.count++
}
}
})
使用数据
方法一:使用$store调用
在组件中直接使用this.$store.state调用数据
this.$store.state.数据名
方法二:导入mapState,在组件中将数据展开映射,需要写到计算属性中,使用的时候直接写 count
就行
//先导入mapState
import {mapState} from 'vuex'
computed:[
...mapState(['count'])
]
在对数据进行操作时,不能直接调用state的数据,如果要修改数据,需要在mutation里写方法,目的就是方便查找哪里除了问题
Mutations的作用与使用方法
mutations里面就是写对数据进行操作的方法的
mutations: {
//存放修改数据的方法
add(state) {
state.count++
}
}
使用方式一:
触发mutations函数,使用commit调用里面的方法名
this.$store.commit这是触发mutation的第一种方式
methods:{
handle(){
this.$store.commit('add')
}
}
mutations传参mutation的方法里可以传递两个参数,第一个就是state,第二个是自定义的参数payload
mutations: {
//存放修改数据的方法
addN(state,N) {
state.count+=N
}
}
调用是在组件的方法里
methods:{
handle2(){
//触发mutation并传参
this.$store.commit('addN',4)
}
}
使用方法二
在组件中导入vuex里的mapMutations函数
mapMutations(['sub'])
是对里面的方法与store里的方法进行映射
...是展开操作符
import {mapMutations} from 'vuex'
methods:{
//将方法名写在[]里 ['addN','sub']
...mapMutations(['sub'])
btnhandle(){
//调用时直接写this.方法名
this.sub()
//当传入参数时,直接写这个参数,不需要写state
this.addN(4)
}
}
注意:在Mutation函数里不能写异步代码;比如写定时函数,虽然页面会改变,但是实际状态数值不会变。于是就有了actions
Actions的用法
Action用于处理异步任务。
如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据.
在store里与mutations同级写一个actions:{ } 在它里面调用mutations的方法,然后在组件中触 发Actions
mutations: {
//存放修改数据的方法
add(state) {
state.count++
}
},
actions:{
//context是上下文
addAsync(context){
setTimeout(()=>{
//调用add方法,actions中不能直接修改state中的数据,只有mutation有这个权力
context.commit('add')
})
}
}
使用actions要在组件中使用dispatch进行触发
btnHandle(){
//dispatch专门触发action
this.$store.dispatch('addAsync')
}
actions传递参数
在store的actions里和mutations都要写形参
mutations: {
//传参
addN(state,n) {
state.count+=n
}
},
actions:{
//context是上下文
addAsync(context,n){
setTimeout(()=>{
//调用add方法,并传参
context.commit('addN',n)
})
}
}
在组件中写实参
btnHandle(){
//dispatch专门触发action,并传入参数
this.$store.dispatch('addAsync',5)
}
第二种是展开并映射引入mapActions
//引入方法
import {mapActions} from 'vuex
methods:{
//映射actions
...mapActions(['addAsync'])
btnhandle(){
//调用对应的actions
this.addAsync()
}
}
//也可以不写btnhandle方法了直接将映射的方法名写在点击操作上
注意:在组件中调用actions方法,在actions中使用commit调用mutations方法
getters
Getter用于对Store中的数据进行加工处理形成新的数据。不会修改原数据
Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
Store中数据发生变化,Getter的数据也会跟着变化.
state:{
count:0
},
getters:{
showNum(state){
return '当前最新的数据是:'+state.count
}
}
第一种调用方式:this.$store.getters.方法名
this.$store.getters.showNum
第二种调用方式:映射展开,在computed中映射
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['showNum'])
}
感谢各位的阅读!关于“vuejs如何实现全局状态管理”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。