前言
在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟
组件之间通讯就比较麻烦了。
比如A组件要告诉一件事给B组件，那么A就要先告诉他们的父组件，然后父组件再告诉B。
当组件比较多，要互相通讯的事情很多的话，管理起来是非常累的事情。
而vuex正是为了解决这个问题，让多个子组件之间可以方便的通讯。
什么是vuex? 为什么要使用vuex ?
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
vuex 类似Redux 的状态管理器, 用来管理Vue的所有组件状态
采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
状态机就是保存你的状态和状态变化的一个盒子。这里有一些不同种类的状态机，适用于我们这个案例的
是有限状态机。像它的名字一样，有限状态机包含有限的几种状态。它接收一个输入并且基于这个输入和
当前的状态决定下一个状态，可能会有多种情况输出。当状态机改变了状态，我们就称为它过渡到一个新
的状态
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
我们需要知道 vue 是单向数据流的方式驱动的
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，
若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
这样使得我们可以方便地跟踪每一个状态的变化，
从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
具体安装使用
1 下载安装vuex
npm install vuex -s
2 下载完成之后在src中创建一个 store 文件夹 创建一个store js文件
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
// 让vue使用vuex工具来实现组件之间的数据共享
Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
3 在main.js中 引入store.js 然后注入 store
// 让vue使用vuex工具来实现组件之间的数据共享
Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
定义
/ 存储数据的对象，我们可以将你需要存储的数据在这个state中定义
const state = {
// 当前登陆的用户名
username: ''
}
const mutations = {
// 提供一个方法，为state中的username赋值
// 这些方法有一个默认的参数，这个参数就是当前store中的State
setUserName (state, username) {
//存入一个值
state.username = username
localStorage.setItem('myname', username)
},
getUserName (state) {
//输出一个值
return state.username
}
}
//使用的时候---> 通过commit调用mutations中定义的函数，这个函数就是操作state中定义的成员的函数
// this.$store.commit('setUserName', res.data.username(请求返回的值))
const actions = {
setUserNameAction: ({commit}, username) => {
commit('setUserName', username)
},
getUserNameAction: ({commit}) => {
commit('getUserName')
}
}
// 通过action来触发mutations中的函数，这种触发方式是异步方式--->使用
//存入 this.$store.dispatch('setUserNameAction', res.data.username + 'aa')
//取出 this.currentUserName = this.$store.dispatch('getUserNameAction')
//Getters是从 store 中的 state 中派生出一些状态，即当出现多处需要导入某个状态时，结果不是很理想，所以getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const getters = {
getUserName: (state) => {
return localStorage.getItem('myname')
}
}
//使用的时候 直接使用
// <span class="welcome">你好：{{$store.getters.getUserName}}</span>
下面我们用一个订单事件来详细说明：
在订单事件中，它可能拥有几个状态，
[color=#4f6128]
未完成的订单、
已完成的订单、
已取消的订单、
删除的订单等。
[/color]
这个事件需要在这多种状态之间切换，那么使用vuex来管理也是非常方便的。来看一下vuex怎么完成状态管理的：
所有组件都是调用actions，分发mutation去修改state，然后state经过getter又更新到各个组件里。state又通过localStorage存储数据到本地，下次重新打开时再读取保存的数据。
store目录
|-store/ // 存放vuex代码
| |-actions.js
| |-getters.js
| |-index.js
| |-mutations.js
| |-state.js
状态管理
接下来，我们来看看vuex完成状态管理的一个流程。
举个例子：一个订单事件里，勾选之后，会在未完成的订单列表里移除，并在已完成的订单列表里出现。这个过程，是这个订单事件的状态发生了改变。勾选的时候，是执行了一个方法，那我们就先写这个方法。在 order.vue 文件里新建一个moveToDone方法。
html 代码
methods: {
moveToDone(id){ //移至已完成
this.$store.dispatch('eventdone', id);
}
}
在 moveToDone 方法中[color=#b71b22]通过 store.dispatch 方法触发 action[/color], 接下来我们在 actions.js 中来注册这个 action, 接受一个 id 的参数。
html 代码
export default {
eventdone = ({ commit }, param) =>{
commit('EVENTDONE',{id: param});
}
}
action [color=#d93330]通过调用 store.commit 提交载荷(也就是{id: param}这个对象)到名为'EVENTDONE'的 mutation[/color]，那我们再来注册这个 mutation
html 代码
export default {
EVENTDONE(states,obj){
for (let i = 0; i < states.event.length; i++) {
if (states.event[i].id === obj.id) {
states.event[i].type = 2;
states.event[i].time = getDate();
var item = states.event[i];
states.event.splice(i, 1); // 把该事件在数组中删除
break;
}
}
states.event.unshift(item); // 把该事件存到数组的第一个元素
local.set(states); // 将整个状态存到本地
}
}
通过 mutation 去修改 state, state里我们存放了一个 event 属性
html 代码
export default {
event: []
};
在组件中要获得这个 state 里的 event, 那就需要写个getters
html 代码
export default {
getDone(states){
return states.event.filter(function (d) {
if (d.type === 2) { // type == 2表示已完成
return d; // 返回已完成的事件
}
});
}
};
然后每个store里都有一个index.js文件，把自己的state、mutation、action、getters都集合起来，
html 代码
import Vue from 'vue'
import Vuex from 'vuex'
import * as func from '../function';
import actions from './actions.js';
import mutations from './mutations.js';
import state from './state.js';
import getters from './getters.js';
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
最后在 order.vue 组件上，我们通过计算属性 computed 来获取到这个从未完成的状态改变到已完成的状态，我们要用到 store 这个对象里的getters
html 代码
computed: {
getDone(){
return this.$store.getters.getDone;
}
}
这样子，完成了 '未完成的订单' => '已完成的订单' 从提交修改到更新视图读取的整个流程，也是 vuex 工作的整个流程。
除此之外通过 module 的封装，更加方便多模块项目的开发和维护。
模块化
为什么要用模块化？当我们的项目比较大，组件很多，功能也多，会导致state里要存放很多内容，整个 store 都会很庞大，很难管理。
我模块化的store目录如下：
|-store/ // 存放vuex代码
| |-Module1
| | |-actions.js
| | |-getters.js
| | |-index.js
| | |-mutations.js
| | |-state.js
| |-Module2
| | |-actions.js
| | |-getters.js
| | |-index.js
| | |-mutations.js
| | |-state.js
| |-index.js // vuex的核心，创建一个store
可以看到，每个模块拥有自己的state、mutation、action、getter，这样子我们就可以把我们的项目根据功能划分为多个模块去使用vuex了，而且后期维护也不会一脸懵逼。
然后每个module里都有一个index.js文件，把自己的state、mutation、action、getters都集合起来，就是一个module
html 代码
import * as func from '../function';
import actions from './actions.js';
import mutations from './mutations.js';
import state from './state.js';
import getters from './getters.js';
export default {
state,
getters,
actions,
mutations
}
在 store/index.js 里创建一个 store 对象来存放这个module
html 代码
import Vue from 'vue';
import Vuex from 'vuex';
import event from './Module1';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
event
}
});
html 代码
state:
repairList: []
import {mapMutations} from 'vuex'
methods:{
...mapMutations({
setRepair: 'SET_REPAIRLIST'
})
}
this.setRepair(res.cnt)//把数据插入
import {mapGetters} from 'vuex'
computed:mapGetters([
'repairList'
])
_this.repairListMsg = _this.repairList 获取vuex的数据
