什么是Vuex?应用场景?

1,476

image.png

1. 作用以及使用场景

1.1 Vuex的功能

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

​ 这是官网给我们的定义,那么什么是状态管理模式?什么是集中式存储管理?。

​ 实际上就是我们多个组件可以共享一些数据。那么这时我们有些疑问,那这个功能我们也可以自己实现啊,只需要把我们需要的共享数据抽离为一个对象,挂载在Vue的原型上,这样我们所有的vue实例就都可以拿到我们共享的数据了。

​ 那么既然如此vue官网为何还要专门推出这个状态管理工具呢?

​ 那就是因为vue的响应式的特性,我们自己定义这种功能实现响应式是比较困难的,因此我们需要Vuex来帮我们实现状态共享的功能。

1.2 Vuex的使用场景

​ 当我们多个页面需要共享数据时就可以使用Vuex。

​ 实际上在真是开发中我们可能会在下面这种情况使用它:

  1. 登录的状态、以及用户的信息
  2. 购物车的信息,收藏的信息等
  3. 用户的地理位置

这些数据我们都可以放在Vuex中进行响应式的管理,还没有学之前,听着都感觉无比方便有没有

1.3 Vuex多页面状态管理工作流程

​ Vue本身为我们做了单页面管理的功能,那么多页面呢,我们如何管理状态。其实我们上文已经提到了,使用Vuex来充当这个全局单例的角色。我们将所有的状态数据抽出,都将其交给Vuex进行托管。再通过视图层来操作我们Vuex中的数据,即可响应式的实现多页面响应式状态管理。这也是Vuex的核心思想。

这时vue官方给出的Vuex装填管理的流程图例,我们可以分析一下:

在这里插入图片描述

​ 首先我们的Vue组件发布一个Actions,在Action里面可以做一些关于网络请求等的异步操作,这里的异步操作完成之后再去将数据提交到Mutation里面,注意到了这里以后Vue为我们提供了一个浏览器插件DevTools,这个插件用于跟踪记录我们各个页面操作Vuex中数据的操作记录,这个操作做完之后再将Mutation里的数据转到State里,再去渲染到组件上。这就是整个的一个工作流程。

注意点:

  1. 我们不能直接操作State里面的数据,虽然这样做不会报错,但是我们DevTools里不会有数据操作的记录
  2. 我们如果是同步操作数据时,可以直接绕过Actions,直接在Mutation操作(这也是官方认可的做法)

因此我们想要使用State中的数据时,直接通过$.store.state.内容即可

操作数据时通过工作机制的流程按需进行即可

2. 基本使用

​ 使用脚手架构建项目时,我们勾选Vuex选项,会自动为我们初始化Vuex的基架。

​ 我们可以手动的走一遍:

​ 第一步:引入

$ npm i vuex --save

​ 第二步:创建store->index.js文件作为我们的vuex操作文件

​ 第三步:引入vuex对象,并且使用Vue.use(vuex)装载

​ 第四步:创建vuex实例并导出:

const store=new Vuex.Store({
})
export default store

​ 第五步:在最上层main.js导入并以store的方式挂在vue实例上:

import Vue from 'vue'
import App from './App.vue'
import store from './store/index';
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  store:store
}).$mount('#app')