vuex （mapState mapActions mapGetters mapMutations）使用示例

App.vue

<template>
  <div id="app">
    {{count}}
    <br/>
    <Demo/>
    <!-- {{$store.getters.doubleCount}} -->
    <!-- <button class="btn" @click="$store.commit('addCount')">点击++</button> -->
    <!-- <button class="btn" @click="$store.dispatch('addCount')">点击++</button> -->
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Demo from './components/demo.vue'
export default {
  name: 'App',
  components:{
    Demo
  },
  // computed:{
  //   count(){
  //     return this.$store.state.count
  //   }
  // }
  // 复杂写法
  computed:mapState({
    count:state => state.count
  })
}
</script>

<style>
</style>

demo.vue 文件

<template>
  <div>
    {{douCount}}
    <br/>
    <button class="btn" @click="addCount">点击++</button>
  </div>
</template>

<script>
import {mapState,mapActions,mapGetters,mapMutations } from 'vuex'
export default {
  name: 'Demo',
  // computed:{
  //   douCount(){
  //     return this.$store.state.douCount
  //   }
  // }
  // 复杂写法
  computed:{
    // douCount(){
    //   return this.$store.state.demo.num * this.$store.state.count
    // }
    ...mapState({
      douCount:(state) => state.demo.num * state.count
    })
  },
  methods:{
    ...mapActions({
      add:'demo/addCount'
    }),
    addCount(){
      this.add();
    }
  }
}
</script>

<style>
</style>

demo.js

const state = {
  num:20
}
const getters = {
  doubleDouCount: (state) => state.num * 2
}
const actions = {
  addCount({ commit, state }) {
    console.log(888)
    setTimeout(() => {
      commit('addCounts')
    }, 1000)
  }
}
const mutations = {
  addCounts(state) {
    console.log(11)
    state.num++
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import demo from './modules/demo' // 复杂写法引入
Vue.use(Vuex)

export default new Vuex.Store({
  //  // 组件中访问 使用this.$store.state.count
  // state: {
  //   count:10
  // },
  // // 异步请求  避免直接操作 state;通过 commit 的形式提交给 mutations 去处理;组建中调用 this.$store.dispatch("方法名")
  // actions: {
  //   addCount({commit}) {
  //     setTimeout(() => {
  //       commit('addCount')
  //     },2000)
  //   }
  // },
  // //缓存 计算   组件中调用this.$store.getters.doubleCount
  // getters: {
  //   doubleCount(state) {
  //     return state.count * 2
  //   }
  // },
  // //通过mutations修改state数据，组件中调用this.$store.commit("方法名")
  // mutations: {
  //   addCount(state) {
  //     state.count++
  //   }
  // }

  // 复杂写法
  state: {
    count:10
  },
  modules: {
    demo
  }
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import 'babel-polyfill'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})