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 这个时候就很实用。

巴特西

vuex状态管理demo

最新文章

热门文章