Vue (Vuex)中 store 基本用法

Vue 提供了 Vuex 这个基于 Flux 架构的状态管理工具。使用 Vuex，我们可以在应用程序的任何组件中非常方便的存储和更新应用的状态数据。这里我们来讲解一下 Vuex 中 store 的基本用法，包括 state、getters、mutations 和 actions 四个部分。

创建 store

我们需要先创建一个 Vuex.store，这个 store 包含四种属性和各自的使用方式，分别是 state、getters、mutations 和 actions。

// 引入 Vuex
import Vuex from 'vuex'
// 使用 Vuex
Vue.use(Vuex)

// 创建 Vuex.store
const store = new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
})

State

我们在 State 中存储全局共享的状态数据，可以通过 this.$store.state 访问，状态数据是响应式的，这意味着一旦状态数据被更新，组件中使用这个状态数据的地方也会相应的得到更新。

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

Getters

Vuex 中的 Getters 类似于组件中的计算属性，通过 Getters 可以派生出一些状态数据。例如在 state 中存储了一个数组，我们可以通过 Getters 来获取数组中的某一个元素。

const store = new Vuex.Store({
  state: {
    products: [
      { name: 'apple', price: 5 },
      { name: 'banana', price: 2 },
      { name: 'watermelon', price: 10 }
    ]
  },
  getters: {
    getProductByName: (state) => (name) => {
      return state.products.find(product => product.name === name)
    }
  }
})

// 在组件中使用 Getters
computed: {
  appleProduct() {
    return this.$store.getters.getProductByName('apple')
  }
}

Mutations

Vuex 中的 Mutations 负责更新 State 中的状态数据，是 store 中唯一能够改变 state 的方法。Mutations 中的方法必须是同步函数，否则我们将无法跟踪状态变化的顺序，而在 Devtools 中也无法很容易的调试。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

// 在组件中使用 Mutations
methods: {
  increment() {
    this.$store.commit('increment')
  },
  decrement() {
    this.$store.commit('decrement')
  }
}

Actions

Vuex 中的 Actions 类似于异步的 Mutations，Actions 中的方法可以包含任何异步操作，最终调用 Mutation 来改变 State。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// 在组件中使用 Actions
methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync')
  }
}

以上是 Vuex 中 store 的基本用法，我们可以通过 store 来存储和管理全局的应用状态数据。通过 State 来存储状态数据，Getters 来计算派生状态数据，Mutations 来同步改变状态数据，Actions 来异步改变状态数据。

示例一：通过 Actions 异步改变状态数据

// 引入 Vuex
import Vuex from 'vuex'
// 使用 Vuex
Vue.use(Vuex)

// 创建 Vuex.store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

// 在组件中使用 Actions
methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync')
  }
}

示例二：通过 Getters 计算状态数据

// 引入 Vuex
import Vuex from 'vuex'
// 使用 Vuex
Vue.use(Vuex)

// 创建 Vuex.store
const store = new Vuex.Store({
  state: {
    products: [
      { name: 'apple', price: 5 },
      { name: 'banana', price: 2 },
      { name: 'watermelon', price: 10 }
    ]
  },
  getters: {
    getProductByName: (state) => (name) => {
      return state.products.find(product => product.name === name)
    }
  }
})

// 在组件中使用 Getters
computed: {
  appleProduct() {
    return this.$store.getters.getProductByName('apple')
  }
}