Vuex入门教程

Vuex是Vue.js的一个应用程序状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

理解Vuex

Vuex可以帮助您在Vue应用程序中维护状态。它有助于在我们的应用程序的多次调用(多个组件访问)中使用一个共享状态。

在Vuex中，一般分为：

State - 包含所有您允许可以变动的属性
Getters - 从state中派生出开发者可以使用的通用状态
Mutations - 更新state中的属性
Actions - 定义更新state的逻辑并commit更新state的mutation

仓库实现

安装Vuex：

使用npm或yarn安装Vuex：

npm install vuex

yarn add vuex

创建store：

在根目录中，创建一个文件夹store，在该文件夹下创建一个index.js文件。

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

Vue.use(Vuex)

const state = {
  count: 0,
}

const getters = {
  count: state => state.count,
}

const mutations = {
  increment(state) {
    state.count += 1
  },
  decrement(state) {
    state.count -= 1
  },
}

const actions = {
  increment(context) {
    context.commit('increment')
  },
  decrement(context) {
    context.commit('decrement')
  },
}

// 导出store
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

应用Vuex

在您创建好store/index.js文件以后，您就可以像应用任何插件一样将Vuex应用到您的Vue应用中：

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store/index'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

小结

Vuex可以帮助你管理应用程序状态，在Vue项目中使用它，需要在根目录下创建一个store文件夹，然后创建一个index.js文件，在文件中定义store、state、getters、mutations、actions，并在渲染应用的时候引入store，即可在应用中使用Vuex状态管理。