1. Vuex简介与安装

1.1 Vuex简介

　　Vuex是为vue.js应用程序开发的状态管理模式，解决的问题：

　　　　◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题

　　　　◊ 不同状态中的行为需要多份复制的问题

　　Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　　核心思想：抽取组件的共享状态，以一个全局单例的模式进行管理。

　　核心：store（仓库）

　　核心组成：

　　　　◊ state：存放项目中需要多组件共享的状态变量

　　　　◊ getters：读取器，存放更改state里状态的方法

　　　　◊ mutations：修改器，从state中派生出状态，如：将state中的某个状态进行过滤然后获取新的状态。

　　　　◊ actions：动作，mutation的加强版，可以通过commit mutations中的方法来改变状态，最重要的是可以进行异步操作。

　　　　◊ modules：模块化，将状态和管理规则模块化封装。

　　　　

　　Vuex文档：

1.2 Vuex安装

　　npm安装：

npm install vuex -S

　　基础示例：

    
         
                     
     
              Copyright © {
    { author }} - 2018 All rights reserved    
     
    

　　vue-cli示例：

　　

　　/store/index.js

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({    // 定义状态    state: {        //key: value        author: 'libing'    }})

　　HelloWorld.vue

　　main.js

import Vue from 'vue'import App from './App'import store from './store/index'Vue.config.productionTip = falsenew Vue({    el: '#app',    store,    components: {        App    },    template: '
     '})