前言
在我们平时项目中,状态管理工具可谓是用途广泛,并且给我们提供了很多的便利,尤其是在全局状态管理中,像vuex、redux、dva等等,
但是,我发现很多小伙伴们对于这些状态管理工具并不是很擅长,我也一样,在我以前写vue项目中,一碰到要用vuex全局管理一个状态时就很头疼,上网上扒代码,功能勉强能实现,于是我抽空上网上找了一个教学视频,主要是讲vuex的,学习了一下,并且把学习到的知识分享给大家。
在vuex的官网中是这样说的
意思就是vuex是一个状态管理工具,vue专用的,还可以集成到vue调试工具中,还有很多高级功能等等。。。。
其实我们常用的不是它的高级功能,而是用它来管理状态。下面,我就跟大家具体讲一下vuex是怎么来管理全局状态的。
安装Vuex
创建一个store
什么是store?百度翻译了一下,store的意思就是商店,其实我们也可以称之为仓库,存放状态或者数据的仓库,任何页面组件都可以从仓库里拿到东西。
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
getters:{},
mutations: {
increment (state) {
state.count++
}
},
actions:{}
})
这就是store文件,再把它引入到main.js中
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store
}).$mount('#app')
这样,我们就可以在页面中使用store里的状态和方法了。
从上面store文件里我们可以看出,在初始化Vuex.Store这个对象时,里面传了state、getters、mutations和actions这四个对象,下面我们就详细的将一下这四个对象。
State: 状态
在vuex里所有的状态都会在state里定义,例如:
state : {
str: '这是vuex的数据',
name:'李四'
}
数据定义完了,我们应该如何使用它呢?
在组件里使用:
<div> {{$store.state.name}} <div>
或者
mounted(){
console.log(this.$store.state.name)
}
不过,我更推荐使用辅助函数mapState并且放在vue的计算属性里
<script>
import { mapState } from 'vuex'
export default {
name: 'App',
computed:{
...mapState(['name']),
},
}
</script>
这样就可以这样使用了
console.log(this.name)
是不是感觉方便了许多
Getters: 计算属性--对数据进行二次加工
定义:
getters: {
getStr(state){
return state,str+'计算属性'
}
}
使用
还是利用辅助函数
<script>
import { mapState, mapGetters } from 'vuex'
export default {
name: 'App',
computed:{
...mapState(['name']),
...mapGetters(['getStr'])
},
}
</script>
console.log(this.getStr)
注:像state和getters这样与属性相关的,统统放到计算属性computed里去
Mutations: 更改Store里的state唯一方法
如标题所说,更改state的唯一方法就是提交mutaition,每个mutation都是个函数,里面有两个参数,一个是state,一个是payload,
state就是我们store里的state而payload是一个对象,里面放的就是我们传进来的参数
定义:
mutations:{
setName(state,payload){
state.name = payload.name
}
}
使用:
methods:{
...mapMutations(['setName']),
btn(name){
this.setName({name})
}
}
注:在mutations里必须使用同步函数,使用异步函数会使调试非常复杂,那么我们要想使用异步函数怎么办呢?别着急,actions来了
Actions:
actions和mutations类似,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
定义
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
action 提交的是mutation,不能直接改变状态,而且action函数里包含参数为context,相当于store,但是我们一般只用到commit方法,所以可以解构为
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment ({commit}) {
commit('increment')
}
}
})
使用
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions(['increment','incrementBy']),
open(){
this.increment()
}
}
}
或者
this.$store.dispatch('increment',{name:'张三'})
总结
在使用vuex中我总结了很多经验,比如每个state、getters、mutations和actions都可以分成一个文件夹,每个文件夹可以建很多js文件,每个js文件都是不同的组件在使用,最后再注册在store中,这样哪个方法或状态用在哪个组件里就可以显而易见了。
大家在自己项目实践中可以慢慢积累经验,也希望我这篇文章能够帮助到大家。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!