vuex的基本用法

1、store.js 

import Vue from "vue";
import Vuex from "vuex"

Vue.use(Vuex);

// 跨组件通信
export default new Vuex.Store({   //内部会创造一个vue实例，通信用的
    state:{    
        // 组件的状态  new Vue(data)
        age:10
    },
    getters:{   //获取数据 计算属性 new Vue(computed)  依赖，当依赖的值变化后， 会重新执行
        getAge(state){ //如果返回的结果相同  不会执行这个函数 
            // 如果age属性不发生变化 就不会重新执行 
            return state.age+18;
        }
    },
    mutations:{ // vue中的方法  唯一可以改状态的方法
        changeAge(state,payload){  //必须是同步的
            state.age+=payload
        }
    },
    actions:{  //通过action发起请求   异步操作在actions中
        changeAge({commit,dispatch},payload){
            setTimeout(() => {
                commit('changeAge',payload);
            }, 1000);
        }
    },
    modules:{

    }
})

2、App.vue

<template>
  <div id="app">
      <div>张三：{{$store.state.age}}</div>
      
      <div>李四：{{$store.getters.getAge}}</div>
      
      <button @click="$store.commit('changeAge',5)">同步更新状态</button>
      <button @click="$store.dispatch('changeAge',5)">异步更新状态</button>
  </div>
</template>
<script>
export default {

}
</script>

<style>

</style>