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

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