Vuejs教程目录:

  1. 从Demo到实例快速上手Vue.js
  2. Vuejs网络请求组件的使用及解决跨域问题
  3. vuejs单文件应用入门
  4. Vue.js单文件项目中使用Vuex:装载工具
  5. Vue.js单文件项目中使用Vuex:数据操作

当我们在开发Vuejs单文件项目中,经常需要使用到全局变量,相当于Session,官方推荐使用Vuex工具去管理这些全局的变量。从官方的说法这叫“状态管理模式”,以下参考官方对于Vuex的介绍:

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

但是我不希望说的这么麻烦,我觉得完全可以把它当成Session来理解,因为这是我们所使用的最多的场景了,比如说:管理全局的用户登录信息,毕竟在整个系统中通过API接口获取到的用户信息时不可能通过Session来进行长期存储的,所以我们有个H5提供的很便捷的前端数据存储方式——localstorage。
但是通常涉及到需要经过处理的数据存储的时候,我们又不太可能在每个读写的地方都进行一系列复杂的数据处理,毕竟一旦使用场景多了之后这会是个非常繁琐的工作。
那么我们就需要通过Vuex来统一管理这些全局的数据,包括他们的状态变更和读写前的数据处理。
好,废话不多说,我们开始在Vuejs项目里接入Vuex的工具。
首先,安装Vuex。老规矩先cd到项目根目录下。
cnpm install vuex -S
然后经过一系列安装过程,Vuex就安装到项目依赖里了。
我们在项目的src目录下新建一个名为vuex的目录,并且在目录下新建一个store.js的文件。
然后我们开始编辑文件。
首先,引入Vuejs和Vuex,并且将Vuex挂在到Vuejs中。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

接下来我们需要定义四个对象,分别是

const state = {}
const mutations = {}
const actions = {}
const getters = {}

我们分开了解一下这五个对象是啥
state官方名称叫:单一状态树。我对此的理解是需要全局管理的所有对象。
mutations官方名称叫:并没有官方名称,我对此的理解是回调函数集合。
actions也没有官方名称,我对此的理解是mutations的兄弟,他俩唯一的区别在于mutations必须支持同步调用,而actions随便。
getters这个地方就是我说的在获取state里的变量的时候可以在这里对它进行一些前置操作,比如说数据转换、运算、处理之类的。
其中需要注意的是mutations是通过commit来触发,而actions是通过dispatch来触发,具体使用方法等等再介绍。
接下来,我们需要实例化整个vuex,然后通过Vuejs的装载口提供给Vuejs来装载。

export defatul new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

那么,这个vuex就做好了,接下来我们需要在Vuejs项目里装载这个Vuex。
我们打开src/main.js这个文件。
在顶部我们引入这个store.js文件

import store from './vuex/store'

然后再下面的Vue实例中加入store

new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: {App}
})

启动项目后,Vuex已经被我们装载到Vue.js的单文件系统里面去了。


接下来我们要讲怎么进行变量的管理