1. 作用以及使用场景
1.1 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')