vuex状态管理（分模块）

1.建立store仓库并安装vuex （npm i vuex --save-dev）

vuex状态管理（分模块）

2.store/modules/card.js

const card = {
  state: {
    cardArr: [11],
  },
  mutations: {
    ADD_CARD:(state, data)=>{
      state.cardArr.push(data);
    },
    REDUCE_CARD:(state)=>{
      state.cardArr.pop();
    },

  },
  actions: {
    AddCardFun({commit}, data){
      console.log(111);
      return new Promise(resolve => {
        commit('ADD_CARD', data);
        resolve()
      })
    },
    ReduceCardFun({commit}){
      console.log(111);
      return new Promise(resolve => {
        commit('REDUCE_CARD');
        resolve()
      })
    },

  }
}

//导出
export default card;

3.store/getters.js

const getters = {
  cardArr: state => state.card.cardArr,
}
export default getters

4.store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters'
import card from './modules/card'
import user from './modules/user'

Vue.use(Vuex);
//构造store
const store = new Vuex.Store({
  // 模块化
  modules: {
    card,
    user
  },
  getters
});
export default store;

5.src/main.js

import store from './store'

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

vuex状态管理（分模块）

6.demo.vue

<template>
  <div>
    <div>{{cardArr}}</div>
    <el-input v-model="input" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="addCard1">输入内容插入card</el-button>
    <el-button type="primary" @click="addCard2">插入aaa入card</el-button>
    <el-button type="primary" @click="ReduceCard">card pop</el-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data (){
    return {
      input:'',

    };
  },
  computed: {
    ...mapGetters([
      'cardArr'
    ])
  },
  methods:{
    //插入card
    addCard1(){
      this.$store.dispatch('AddCardFun',this.input).then(()=>{
        console.log('添加成功');
      })
    },
    addCard2(){
      this.$store.commit("ADD_CARD",'aaa');
    },
    ReduceCard(){
      this.$store.commit("REDUCE_CARD");
    }
  },
  mounted(){
    console.log(11,this.$store.state.card.cardArr);
    console.log(22,this.cardArr);
  },
}

</script>
<style lang='less' scoped>
</style>

7.action可执行异步操作,而mutation只能执行同步操作，可在action里进行异步操作提交mutation进行同步状态修改

vuex状态管理（分模块）

相关推荐