vuex基本配置

目录

1.创建一个Vuex的store对象

2.在Vue组件中使用store

---

Vuex是一个Vue.js状态管理模式，它可以把数据存储到全局，并在不同组件之间共享这些数据。以下是Vuex的基本配置：

1.创建一个Vuex的store对象

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: { //存放全局状态
    count: 0
  },
  mutations: { //改变状态的方法
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: { //异步操作，提交mutations来改变状态
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: { //计算状态属性
    doubledCount: state => {
      return state.count * 2
    }
  }
})

在store中，我们可以定义state、mutations、actions和getters，分别用来存放全局状态、改变状态的方法、异步操作和计算状态属性。

2.在Vue组件中使用store

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubledCount }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementAsync">+ async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubledCount'])
  },
  methods: {
    ...mapActions(['increment', 'decrement', 'incrementAsync'])
  }
}
</script>

在Vue组件中，我们可以通过mapState、mapGetters、mapActions来访问store中的状态、计算属性和方法。使用这些辅助函数可以更方便地访问store，并且可以省去一些重复的代码。