vuex的简单入门

一、Vuex是什么


Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension(链接:GitHub - vuejs/vue-devtools: ⚙️ Browser devtools extension for debugging Vue.js applications.),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、什么情况下我应该使用 Vuex?


Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式(链接:状态管理 — Vue.js)就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。

安装、使用Vuex

官网上有很详细、多种的安装方式,大家可以去看看(链接:安装 | Vuex)

首先我们在 vue.js 2.0 开发环境中安装 vuex :

npm install vuex --save

然后 , 在 main.js 中加入 :

再然后 , 在实例化 Vue对象时加入 store 对象 :

完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。

在 Vue 的单页面应用中使用,需要使用Vue.use(Vuex)调用插件。将其注入到Vue根实例中。

然后改变状态:

this.$store.commit('increment')

三、Vuex的构成


由上图,我们可以看出Vuex有以下几个部分构成:

1)state

state是存储的单一状态,是存储的基本数据。

2)Getters

getters是store的计算属性,对state的加工,是派生出来的数据。就像computed计算属性一样,getter返回的值会根据它的依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算。

3)Mutations

mutations提交更改数据,使用store.commit方法更改state存储的状态。(mutations同步函数)

4)Actions

actions像一个装饰器,提交mutation,而不是直接变更状态。(actions可以包含任何异步操作)

5)Module

Module是store分割的模块,每个模块拥有自己的state、getters、mutations、actions。

四、详细介绍Vuex的几个核心内容


1、State

Vuex 使用 state 来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改,需要基于state 创建计算属性。

2、Getter

类似于 Vue 中的 计算属性(可以认为是 store 的计算属性),getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getter 方法接受 state 作为其第一个参数:

3、Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。也就是说,前面两个都是状态值本身,mutations才是改变状态的执行者。

注意:mutations只能是同步地更改状态。

Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

4、actions

多个 state 的操作 , 使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了:

官方推荐 , 将异步操作放在 action 中。

5.plugins

插件其实就是vuex的一些与设定的初始化时期运行的内容,所以我们可以知道plugins是一个函数内容,其中的第一个参数内容是store对象内容,方便插件对于store对象的调用。同时我们可以通过store之中的subscribe方法,这个方法注册了一个mutation的后置处理切面(感觉像是截胡)。此方法需要传递一个函数作为参数,这个函数之中有两个参数内容分别是mutation对象和state对象。其中mutation对象的格式是{type, payload},state则是修改完成之后的state内容。

这样在vuex初始化的时候在控制台打印store的内容,然后在我们每次提交mutation的时候将会在控制台打印mutation和state的数据内容。编写好插件之后,我们可以通过在store的管理对象中添加plugins关键字,传递一个数组的方式来引用插件。

接下来我们说一说插件的几种巡查使用:

1.有的时候我们需要做改变前后的state的比对,我们可以通过插件来进行,简化代码如下:

通过存储state内容的快照信息,我们将可以比对内容变更,依据变更来实现部分逻辑。

2.经常我们需要存储号我们的vuex数据,因为vue的页面展示变更时不以页面刷新来进行的,如果用户习惯性的点击刷新按键,没有存储当前vuex之中的数据的时候会导致数据的重新初始化,这样将会严重的影响当前用户的使用体验的。这个时候数据缓存的工作实际上就可以交由plugin来做了,这里上一段简单的缓存代码:

这样我们就可以很完好的保存当前数据内容的形式了,方便之后用户的刷新和使用。

3.使用插件来进行日志的记录。数据展示的改变需要依据状态的改变,状态的改变需要通过mutation的操作,而mutation的操作之后就是我们记录日志的时候,所以也是常常使用的功能之一。当然我们的vuex已经有自带的createLogger日志插件了,如果你使用vue-devtool完全可以不用这一插件了。createLogger的使用可以查看一下vuex官网的相关部分(点击这里),这里我就不细说了。

当然上面提及的三种只是很少量的部分,我们可以使用的方式实际上还是有很多的,有待于每一个开发人员去发现和想象。

以上就是Vuex的简单入门

你可能感兴趣的:(vuex的简单入门)