vuex3.6.2使用
时间: 2024-09-18 22:03:44 浏览: 21
Vuex是Vue.js官方提供的一个状态管理模式,它帮助我们在单页面应用(SPA)中管理共享的状态。在版本3.6.2中,Vuex的主要特点包括:
1. **集中式存储**: 将应用程序的所有组件的状态集中到单一的状态树中,通过`store`对象访问。
2. **模块化设计**: 支持模块化的结构,可以将状态和相应的 mutations、actions 和 getters 分割成多个独立的部分,提高代码组织性和复用性。
3. **响应式**: 当状态发生改变时,会自动更新所有依赖于该状态的组件,无需手动触发视图更新。
4. **actions与mutations分离**: Actions用于异步操作,比如发送HTTP请求,而mutations处理纯数据更改,遵循“不可变原则”。
5. **getter**: 可以像读取属性一样获取状态值,并且它们会被懒加载,只有在真正需要的时候才会计算。
以下是基本的使用步骤:
```javascript
// 安装vuex
npm install vuex --save
// 创建store实例
import { createStore } from 'vuex'
const store = createStore({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
async increment ({ commit }) {
await someAsyncOperation()
commit('increment')
}
},
getters: {
getCount: state => state.count
}
})
// 使用store
export default {
computed: {
count () {
return this.$store.getters.getCount
}
},
methods: {
async increment () {
this.$store.dispatch('increment')
}
}
}
```