vuex传值的使用

1.导入vuex

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

2.创建store实例

 let store = new Vuex.Store({
   state:{
     count:1
   },
   mutations:{
     get_count(state){
       state.count++;
     }
   },
   actions:{
     //Actions函数接收一个与store实例具有相同方法和属性的context对象
     //处理异步操作
     get_count(context){
       setTimeout(()=>{
         context.commit('get_count')
       },500)
     }
   }
 });

3.home组件

 <template>
   <div>
     我是首页
     <Son></Son>
     <button @click="clickHandler">vuex</button>
   </div>
 </template>

 <script>
   import Son from "./Son"
   export default {
     name:"Home",
     data(){
       return {}
     },
     components:{
       Son
     },
     methods:{
       clickHandler(){
         this.$store.dispatch('get_count')
       }
     }

   }
 </script>

 <style>

 </style>

4.son组件

 <template>
   <div>
     <h2>我是子组件{{ getCount }}</h2>
   </div>
 </template>

 <script>
   export default {
     name:"Son",
     data(){
       return{}
     },
     computed:{
       getCount(){
         return this.$store.state.count
       }
     }
   }
 </script>

 <style>

 </style>