状态管理与Vuex

在实际的业务中，经常有跨组件共享数据的需求，Vuex就是设计用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件的应用更高效。

引入Vuex之后统一对共享数据进行管理存放，在各个页面中可以利用commit方法提交mutation对共享数据进行修改。

// store/index.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

// Component.vue
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      return this.$store.commit("increment");
    },
    decrement() {
      return this.$store.commit("decrement");
    }
  }
};

Tags: 前端 Vue

赏

使用微信打赏

使用支付宝打赏

雅致寓于高阁渔舟唱晚，古典悠然；
格调外发园林绿树萦绕，馥郁清香。

扫描二维码，分享此文章