vuex状态管理demo

vuex状态管理主要包含四个概念  mapState，mapMutations，mapGetters，mapActions。

 

编写vuex文件夹下面的store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);


const state = {
    count:1,
    cc:111
}

const mutations={
    add(state){
        state.count+=1;
    },
    reduce(state){
        state.count-=1;
    }
}
const getters = {
    count: function (state) {
        return state.count += 100;
    }
}

const actions = {
    addAction(context) {
        // context.commit('add');
        setTimeout(() => { context.commit('add') }, 1000);
    },
    reduceAction(context) {
       setTimeout(() => { context.commit('reduce') }, 1000);
    }
};


export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
});

 

项目main.js中引入vuex

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './style/element-variables.scss'
import store from './vuex/store'
import './config/axios.js'
import 'babel-polyfill'

Vue.config.productionTip = false


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

 

组件页面代码如下

<template>
  <div class="page">
    <h1>{{msg}}</h1>
    <div>
      <h1>{{cc}}</h1>
      <h1>{{count}}</h1>
      <el-button @click="add">add++</el-button>
      <el-button @click="reduce">reduce--</el-button>
      <el-button @click="addAction">addAction++</el-button>
      <el-button @click="reduceAction">reduceAction--</el-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      msg: 'vuex demo',
    }
  },
  computed: mapState({
    count: state => state.count,
    cc: state => state.cc,
  }),//此处mapStat函数形式科直接替代mapGetters处理数据

  //mapState两种形式
  // computed:{
  //   ...mapState([
  //     'count',
  //     'cc',
  //   ]),
  //   ...mapGetters([
  //     'count',
  //   ]),
  // },//此处对象扩展需在vuex文件用getters处理数据

  methods: {
    ...mapMutations(["add", "reduce"]),
    ...mapActions(["addAction", "reduceAction"]),

  }
}

</script>
<style lang="scss">


</style>

 

附上实际开发项目目录

在vue的组件化实际项目开发中，我们经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用。