vuex传值

vuex的传值，首先在store文件夹下的index.js文件中

import Vue from 'vue'
import Vuex from 'vuex'
//首先我们这边先引入一下vue和vuex
Vue.use(Vuex)

export default new Vuex.Store({
  //第一步：state用来存放状态
  state: {
    count: 24
  },
  //第二步：mutations用来修改state的状态
  mutations: {
    setCount(state, args) {
      return state.count += args
    }
  },
  //第三步：通过actions里面的commit方法
  actions: {
    actionCount({
      commit
    }, args) {
      commit('setCount', args)
    }
  },
  第四步：这边的getter就是用来返回当前的状态的
  getters: {
    getCount(state) {
      return state.count
    }
  },
  modules: {
  }
})

这边需要注意：我们的

mapactions帮助我们把actions里面的方法直接从actions里面拿出来放到methods里面直接去使用

mapgetters是帮助我们去从getter里面的把方法取出来放到computed里面直接把它当成属性去使用

所有想要使用mapactions只能在methods中，mapgetters只能在计算属性中使用

然后就是在我们以home.vue结尾的页面这边是mapactions

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <div>{{getCount}}</div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {mapGetters} from "vuex"
export default {
  name: 'Home',
  components: {
    HelloWorld,
  },
  computed:{
    ...mapGetters(['getCount'])
  }
}
</script>

 这边在hellowworld.vue文件中

<template>
  <div class="hello">
    <button @click="actionCount(5)">点击修改state的状态值</button>
   
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  name: 'HelloWorld',
  props: {

  },
  methods:{
    ...mapActions(["actionCount"]),
  
  }
}
</script>