VUE系列(1)—vue项目的升级入门

@XYooo 2017-12-31 15:58:56发表于 iuap-design/blog

这里说的升级入门只要指的是vuex的使用。这里先讲一下我的业务需求背景:
(1)需求背景
在做使用vue语言的项目时候有个业务需求是:选择人员按钮——进入企业选择——人员选择。
同时需求是:
1.要记录企业的选择的情况,和人员选择的情况。
2.可以对选择的人员进行操作,已选择的人员列表中进行操作的时候,也要记录操作之后的数据的企业选择情况和人员选择情况。
3.同时也可以进行用户搜索,搜索之后记录操作之后的数据也有着对企业和人员的选择情况。
在这五个页面中的企业和人员的选择数据要来回的被操作和修改,因此这里选择了vuex
(2)vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

2-1 开始
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store中的状态发生变化,那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

(3)项目中实际的使用情况
3-1 npm install vuex
3-2创建store.js
3-3在上篇文章提到index.js中使用
3-4this.$store.state.XXX
3-5 this.$store.commit(serXXX,value)