这篇文章主要介绍“vue状态管理实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue状态管理实例分析”文章能帮助大家解决问题。
创新互联成立与2013年,是专业互联网技术服务公司,拥有项目网站建设、成都网站制作网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元文成做网站,已为上家服务,为文成各地企业和个人服务,联系电话:13518219792
场景:一个地图应用,有个侧边栏,侧边栏里面放着很多选项,选项改变的时候,应用会根据侧边栏的条件请求数据,然后在地图上放 markers 。页面可以简单抽象成如下结构:
// App.vue
有很多种方式可以来完成上面的需求,我先介绍 2 种常见的做法,最后再给出一个比较另类但很有趣的方案。
1.直接上 vuex
通常来讲,有多个组件共享状态的时候,把共享的状态丢给 vuex 来处理是个不错的方案。但是在处理上面那个场景的时候,会显示的有点「笨重」,因为侧边栏实际上是一个表单,如果使用 vuex 的话,就需要为每个选项定义一套 mutation,失去了直接使用 v-model 的便利。
直接使用组件状态绑定一个选项
// sidebar.vue
// ...
data () {
return {
message: ''
}
}
当使用 vuex 绑定一个选项时,多了不少「模板」代码
// 定义 state, mutation
state: {
message: ''
},
mutations: {
updateMessage (state, message) {
state.message = message
}
}
// sidebar.vue
// ...
computed: {
...mapState({
message: state => state.message
})
},
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
2.将状态放到父组件上
如果 sidebar 和 map 有一个共同的父级,使用这种方式处理起来会比上面的简单很多。但是当我们的应用越来越大的时候,往往会把 sidebar 和 map 拆成颗粒度更小的组件,那么通过 props 一层层传给子组件也会变的非常麻烦。
3.将组件状态「共享」出来
我们通常把组件内的状态写成下面这种形式:
// ...
data () {
return {
message: ''
}
}
实际上,我们可以把 data () {} 中返回的对象单独提取到外面,作为一个变量,像下面这种写法:
const state = { message: '' }
// ...
data () {
return state
}
那么在这个组件初始化过程中,state 对象会被 vue 「响应式化」,这会引出一个有趣的事情:任何组件,只要模版中使用了 state.message ,当 state.message 改变时,页面都会被同步更新。
知道了这个之后,我们就可以将侧边栏的状态写成一个独立的文件,作为一个模块引入其他组件中,结构如下:
// state.js
export default { message: '' }
// sidebar.vue
import state from 'path/to/state.js'
// ...
data () {
return { state }
}
// map.vue
// 在模版中使用侧边栏的状态
import state from 'path/to/state.js'
// ...
data () {
return { state }
},
created () {
// 将侧边栏的状态作为参数去请求数据
axios.get('/xxxx', { params: state })
}
这样做的一个好处是,既可以在 sidebar.vue 中把 state 当作「内部」状态,愉快的使用 v-model 绑定数据,map.vue 中也可以方便的拿到 state 做为参数请求,同时还可以直接在 map.vue 的模版中使用 ——state.message——。
更进一步
上面的方案中,state「响应式化」是发生在子组件初始化的过程中,我希望能在应用开始的时候,主动在某个时刻完成这一步。这个时候就可以借助 Vue 构造函数,像下面这样:
// store.js
import state from 'path/to/state.js'
new Vue({
data: {
state
}
})
然后在主文件 main.js 中引入 store.js,state 就会被「响应式化」。
关于“vue状态管理实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。