一、 vuex的安装与引入

这里呢，主要就三种安装方式

1、官网直接下载

下载完成后，引入即可

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

2、npm安装

//在对应文件夹下的cmd中输入下行即可，或编辑器终端中输入
npm install vuex --save

3、yarn安装

//在对应文件夹下的cmd输入下行即可，或在编辑器终端中输入
yarn add vuex

以上两种方式需要进行人为引入

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

二、 vuex的五大核心概念

1、state

它是一个单一状态树，用一个对象就包含了所有的应用层级状态。

或者说它就是vuex的基本数据，用来存储数据变量。

state: {
    count: 0；
  }

2、getters

就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

 getters: {
        countx: function(state){
            return state.count * 2
        },
        countDouble: function(state, getters) {
            return getters.countx* 2
        }
    }

3、mutation

提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

  mutations: {
    //无参
    inxxz(state) {
        state.count++
    }
    //含参
    inxxxz(state, obj) {
      state.count += obj.n
    }
  }

4、action

和mutation的功能大致相同，不同之处在于Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

actions: { 
   inxxz (context) { 
     setInterval(function(){ 
       context.commit('inxxz') 
     }, 1000) 
   } 
}

5、modules

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

昂昂昂，先接上昨天的Vuex