Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以下是 Vuex 的基本用法
Vuex 基本用法
安装 Vuex
首先,你需要安装 Vuex。如果你使用的是 npm,可以使用以下命令:
npm install vuex --save
创建 Vuex Store
创建一个新的 Vuex store 实例,它将包含所有状态(state)、改变状态的方法(mutations)和获取状态的函数(getters)。
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {increment(context) {context.commit('increment')}},getters: {doubleCount(state) {return state.count * 2}}
})
在 Vue 组件中使用 Vuex Store
你可以在 Vue 组件中使用 mapState
、mapGetters
、mapActions
和 mapMutations
辅助函数来使用 Vuex store。
<template><div><p>{{ count }}</p><p>{{ doubleCount }}</p><button @click="increment">Increment</button></div>
</template><script>
import { mapState, mapGetters, mapActions } from 'vuex'export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {...mapActions(['increment'])}
}
</script>
Vuex 模块
Vuex 允许你将 store 分割成模块,每个模块拥有自己的 state、mutations、actions、getters,甚至是嵌套子模块。
const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const store = new Vuex.Store({modules: {a: moduleA}
})
Vuex 严格模式
Vuex 允许你以严格模式运行,这在开发过程中非常有用,因为它会阻止你对状态的直接更改。
const store = new Vuex.Store({// ...strict: process.env.NODE_ENV !== 'production'
})
Vuex 插件
Vuex 允许你使用插件来扩展 store 的功能。插件可以监听 Vuex store 的 mutation 并响应它们。
const myPlugin = store => {store.subscribe((mutation, state) => {// 调用 API 或者其他响应})
}const store = new Vuex.Store({// ...plugins: [myPlugin]
})
以上就是 Vuex 的基本用法。
你可以在 Vuex 官方文档 中找到更多高级用法和配置选项。