什么是Vuex?应用场景? |
您所在的位置:网站首页 › vuex运用场景 › 什么是Vuex?应用场景? |
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 这是官网给我们的定义,那么什么是状态管理模式?什么是集中式存储管理?。 实际上就是我们多个组件可以共享一些数据。那么这时我们有些疑问,那这个功能我们也可以自己实现啊,只需要把我们需要的共享数据抽离为一个对象,挂载在Vue的原型上,这样我们所有的vue实例就都可以拿到我们共享的数据了。 那么既然如此vue官网为何还要专门推出这个状态管理工具呢? 那就是因为vue的响应式的特性,我们自己定义这种功能实现响应式是比较困难的,因此我们需要Vuex来帮我们实现状态共享的功能。 1.2 Vuex的使用场景 当我们多个页面需要共享数据时就可以使用Vuex。 实际上在真是开发中我们可能会在下面这种情况使用它: 登录的状态、以及用户的信息 购物车的信息,收藏的信息等 用户的地理位置这些数据我们都可以放在Vuex中进行响应式的管理,还没有学之前,听着都感觉无比方便有没有 1.3 Vuex多页面状态管理工作流程 Vue本身为我们做了单页面管理的功能,那么多页面呢,我们如何管理状态。其实我们上文已经提到了,使用Vuex来充当这个全局单例的角色。我们将所有的状态数据抽出,都将其交给Vuex进行托管。再通过视图层来操作我们Vuex中的数据,即可响应式的实现多页面响应式状态管理。这也是Vuex的核心思想。 这时vue官方给出的Vuex装填管理的流程图例,我们可以分析一下: 首先我们的Vue组件发布一个Actions,在Action里面可以做一些关于网络请求等的异步操作,这里的异步操作完成之后再去将数据提交到Mutation里面,注意到了这里以后Vue为我们提供了一个浏览器插件DevTools,这个插件用于跟踪记录我们各个页面操作Vuex中数据的操作记录,这个操作做完之后再将Mutation里的数据转到State里,再去渲染到组件上。这就是整个的一个工作流程。 注意点: 我们不能直接操作State里面的数据,虽然这样做不会报错,但是我们DevTools里不会有数据操作的记录 我们如果是同步操作数据时,可以直接绕过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') 复制代码 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |