vuex全局状态管理

1. vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

在vue中我们可以使用vuex来保存我们需要管理的状态值,,值一旦被修改,所有引用该值的地方就会自动更新.

2.在vuex出现之前,vue里面的状态是属于‘单向数据流’

举个官网的例子:

new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: <div>{{ count }} </div,
// actions
methods: {
increment () {
this.count++
}
}
})


1.state是一个数据源
2.view以声明的方式将state映射到视图
3.actions 响应在view上的用户输入导致的状态变化

**但是解决不了 "多个组件共享状态"

所以vuex应运而生

简单来说,就是共享的状态用state来存放,用mutations来操作state,但是需要用store.commit来主动式的操作mutations。

1.State 单一状态树

vuex使用单一状态树,那么就可以用一个对象来包含全部的应用层级状态。所以state就作为数据源。

由于vuex的状态存储是响应式的,所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态:

什么是计算属性?

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
---这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理.
--- 如果使用计算属性的方法来写的话最终返回一个结果就可以了;
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>  //把复杂处理放在了计算属性里面了
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split('').reverse().join('')
}

}

});

结果:

Original message: "Hello"

Computed reversed message: "olleH"

如何在组件中获得vuex状态?

由于vuex的状态存储是响应式的,所以从store实例中读取状态的最简单方法就是使用计算属性来返回某个状态:

-----这个是store/state.js中声明的数据源


image.png

这个是在组件中进行的引用


image.png

不过需要注意的是,在组件中进行引用之前,需要先在入门文件中进行注入


image.png

如果不在根实例中注册store选项的话,那么需要在每一个使用state的组件中都要导入。注册之后,子组件只需要this.$store即可调用vuex。

2.Getters:

getter相当于组件中计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

有时候我们需要从state中派生出一些状态,比如筛选一组列表,并且这个筛选后的数据是有其他组件要用的。那么我们就需要把这个结果进行包装,形成共享状态,例如:

computed:{
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}

如果说这个length是其他组件用的话,Getter就这样应运而生了

getters: {
doneTodosCount: state => {
return state.todos.filter(todo => todo.done).length }}

Getter 会暴露为store.getters对象,所以很容易在任何组件中使用它

computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}

这是getters.js


image.png

这是组件中的引用


image.png

3.Mutations

Mutations里面装着一些改变数据方法的集合

更改Vuex的store(仓库)中的状态的唯一方法就是提交mutations。
Vuex中的mutations就像一个事件:每个mutations都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数接受state(数据源)作为第一个参数。

但是我们又不能直接来调用一个mutations的handler。要唤醒一个mutations handler,需要以相应的type来调用store.commit方法。
这个是在mutations.js中注册的一些的事件


image.png

这是在组件中来触发这个事件


image.png

mutations中可以传递额外的参数,这个参数就叫做mutations的载荷,在更多的情况下,载荷应该是一个对象。这样可以包含更多的字段
但是mutations必须是同步函数,所以要用actions来异步更新State.

4.Actions

Actions类似于 mutations 不同的是:
Actions 提交的是mutations,而不是直接变更状态。
Actions 可以包含任意异步操作。
这也就形成了 actions —— mutations —— state 的过程
Actions函数接受一个与store实例具有相同方法和属性的context对象,因此可以通过context.commit来提交一个mutations。用store.dispatch触发。


image.png

image.png

image.png

5.Modules

使用单一状态树,导致应用的所有状态都集中到了一个很大的对象。所以,store对象容易变得臃肿。
为了解决这个问题, Vuex允许咱们把store进行一个功能拆分,分割成不同的模块(module)。每个模块都拥有自己的store,mutations,action,getters。

项目结构

image.png

总结:
vuex可以用在单页面上的组件间共享状态。不适合用于跨页面的通信。
另外,对于一些跨页面的数据或者关键性的数据,可以通过localStorage,sessionStorage

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vuex Vuex是类似Flux的状态管理库,专门用于Vue的状态管理。 对于那些不熟悉的人来说,Flux是Fac...
    我欢喜喜欢你阅读 880评论 0 0
  • 核心概念 Vuex 是适用于 Vue.js 应用的状态管理库,为应用中的所有组件提供集中式的状态存储与操作,保证了...
    F飞凡阅读 2,808评论 0 4
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,154评论 0 6
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,128评论 4 51
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,970评论 0 7