最近学着在用vue开发项目，边学边记真的是个好习惯呢

Vuex

安装 Vuex

npm i vuex --save-dev

在src文件夹下，新建一个store文件夹，创建index.js 做如下配置

import Vue from 'Vue';
import Vuex from 'vuex';
import state from './state';
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import modules from './modules'

Vue.use('Vuex');
export default new Vuex.Store({
    state,
	getters,
	mutations,
	actions,
	modules
})

然后在main.js下的vue实例下挂载store
Vuex 是一个专为Vue.js设计的状态管理模式；

• vuex解决组件之间同一状态的共享问题。比如token
• 有了vuex，组件和store通讯了
  Vue.store
• state 进行组件共享数据的集中存储{}
• getters 原理computed用于返回最新的数据值{计算属性写法}
• mutations 唯一一个能够修改state里面数据的地方(不能做异步)
• actions 处理异步请求–异步调用mutations函数
• modules模块，当数据较多的情况下，而且数据之前没有什么关系，用模块划分，每一个模块对象都包含以上4部分
  mapState mapGetters mapActions
• commit 同步调用mutations方法
• dispatch 异步调用actions方法

State --放一些全局数据 变量

var state={
    count:0,
    name:''
}
export default state

在组件内使用这些数据

<h3>{{this.$store.state.count}}</h3>
<h3>{{this.$store.state.info.count}}</h3>//这个是在modules里info的state
<h3>间接获取 {{count}}</h3> //间接获取state里的某数据

mutations --存放全局函数 作用：唯一修改state里数据的地方

var mutations={
    add(state){
        state.count++
    },
    jian(state){
        state.count--
    }，
    login(state,name){
        state.name = name
    }
}
export default mutations 

在组件里调用mutations

tap(){
    this.$store.commit('add')
},
login(){
    this.$store.commit('login',this.username);
}

在组件里间接获取(语法糖)

computed:{
    ...mapState(['count'])
}

actions 处理异步请求

var actions = {
    jian({commit}){
        setTimeout(function(){
            commit('jian')
        },2000)
    },
    login({commit},name){
        setTimeout(function(){
            commit('login',name)
        },2000)
    }
}
export default actions

在组件里异步调用 actions里的异步函数 以及传参

methods{
...mapActions(['jian','login1'])// 其中传参是在login1(username)传的，username是data里的数据
//或者
    tap(){
        this.$store.dispatch('jian')
    }   
}

getters 一些随着绑定的数据变化而产生变化 计算属性

var getters={
    count1: function(state){
        if(state.count>10){
            return 'hello world'
        }else{
            return 'hi'
        }
    }
    
}
export default getters;

在组件里调用

computed:{
    ...mapGetters(['count1'])
}

modules 将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter);方便维护