VUE-X 的传值使用

1.导入vuex   vuex是基于vue 的

 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)
     }
   }
 });

store 实例

3.父组件

 <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.子组件

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

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

 <style>

 </style>

子组件

实际上,vuex传递的首先要经过dispatch 传值 到actions 中 经过actions 的context .commit () 再次传达到mutations中 ,在state 来动态传值    return this.$store.state.count