vuex的简介和基本用法

一、vuex介绍
1、Vuex简介
Vuex是专门为vue.js应用程序开发的状态管理模式，它采用集中存储应用管理的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。通俗的讲就是集中管理所有组件中data里面的属性，它的最大最用就是解决组件之间的传值问题，看过我的第一篇介绍父子组件以及兄弟组件之间是如何传值的应该知道相对还是比较复杂的，在组件比较多的项目中更是十分麻烦，而Vuex可以不用管组件之间的关系，通过集中管理就可以很容易的做到。
2、官方文档里面开篇就给出了一张介绍vuex的示意图。
3、Vuex重要核心概念
store
vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象.创建store
const store = new Vuex.Store({…});
可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含一下几个对象：
(1) state（单一状态树）
用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
（2）getters – state的计算属性
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
（3）Mutations – 更改状态的逻辑，同步操作
更改 Vuex 的 store 中的状态的唯一方法是提交 mutations。Vuex 中的 mutations 非常类似于事件：每个 mutations 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
（4）actions – 提交mutations，异步操作
Actions 提交的是 mutations，而不是直接变更状态。
Actions 可以包含任意异步操作。
（5）mudules – 将store模块化
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割
二、Vuex的简单使用方法
1、在项目中安装Vuex
npm install vuex --save
2、在项目src文件夹下创建store文件在此文件下创建store.js，并添加如下代码

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
          // 存放状态
          count:0，
          list:[
             { name: "马云", salaryAmount: 1000},
             { name: "马化腾",  salaryAmount: 900 }
          ]
       },
    getters: {
        // state的计算属性
        addCount:function(){
            return this.$store.state.count;
        },
        // 增加一个 getter 方法，用于返回加工后的 工资
        doubleSalary: (state) => {
            var afterDoubleSalary = 
            state.storeSalaryList.map(salary => {
            return {
                name: salary.name,
                salaryAmount: salary.salaryAmount * 2
            };
        });
        return afterDoubleSalary;
    }
    },
    mutations: {
        // 更改state中状态的逻辑，同步操作
    },
    actions: {
        // 提交mutation，异步操作
    },
    // 如果将store分成一个个的模块的话，则需要用到modules。然后在每一个module中写state, getters, mutations, actions等。
    modules: {
        a: moduleA,
        b: moduleB,
        // ...
    }
    const moduleA = {
	state: { ... },
	  mutations: { ... },
	  actions: { ... },
	  getters: { ... }
     }	
   const moduleB = {
	  state: { ... },
	  mutations: { ... },
	  actions: { ... }
	}
 })

3、在项目中的main.js添加如下图画线部分代码,这样就把store 实例注入到根组件下的所有子组件中，在组件中使用时就不用每个都引入store，直接通过this.$store.state就可以获取状态值了

4、如何获取vuex的数据和方法，在需要用到的组件中引用即可，

<script>
    export default {
       // 通过 computed 属性，获取到 store.js 中的数据和方法，并返回
        computed: {
        //通过this.$store.state.数据名  获取数据
            salaryList() {
                return this.$store.state.count;
            }
            //通过this.$store.getter.方法名  获取方法
            addCount:function(){
                return this.$store.getter. doubleSalary
            }
        }
    }
</script>

5、当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapGetters辅助函数来帮我们生成计算属性。

 ...mapGetters(
      // 注意这里是一个对象
      {
          mycount: 'addCount',
          myDoubleSalary: 'doubleSalary'
      }
    )

6、要修改状态必须通过mutation同步操作修改再由actions异步提交，

 mutations: {
        increment(state){
            state.count++
        }
    },
  actions: {
       increment(context){
           context.commit("increment")
       }
   }

因为mutations相当于methods，所以在组件中要通过点击事件<button @click="increment">add</button>来触发

 methods: {
    increment(){
       this.$store.commit('increment');
    }
 }