vuex的五个属性及使用方法
时间: 2023-06-29 07:20:46 浏览: 133
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库,用于管理组件之间共享的状态。Vuex 有五个核心属性:state、mutations、actions、getters 和 modules。
1. state:state 是一个存储数据的对象,用于存储应用程序中的状态。可以通过 this.$store.state.xxx 访问该属性的值。
2. mutations:mutations 是用于修改 state 中的数据的方法,它们必须是同步函数。可以通过 this.$store.commit('mutationName') 调用 mutations 中的方法。
3. actions:actions 用于处理异步操作和异步任务,可以通过 this.$store.dispatch('actionName') 调用 actions 中的方法。actions 中可以提交 mutations 来修改 state 中的数据。
4. getters:getters 用于访问 state 中的数据并进行计算,类似于 Vue.js 中的计算属性。可以通过 this.$store.getters.getterName 访问 getters 中的方法。
5. modules:modules 允许将 store 分割成模块,每个模块拥有自己的 state、mutations、actions 和 getters。可以通过 this.$store.state.moduleName.xxx 访问模块中的 state 属性。
使用方法:
1. 安装 Vuex:npm install vuex --save
2. 创建 store.js 文件,定义 state、mutations、actions、getters 和 modules 等属性。
3. 在 Vue 组件中引入 Vuex 并注册 store。
4. 在 Vue 组件中通过 this.$store.state.xxx、this.$store.commit('mutationName')、this.$store.dispatch('actionName') 和 this.$store.getters.getterName 访问和修改状态。
示例代码:
store.js 文件:
```
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: {
getCount: state => {
return state.count
}
},
modules: {
moduleA: {
state: {},
mutations: {},
actions: {},
getters: {}
},
moduleB: {
state: {},
mutations: {},
actions: {},
getters: {}
}
}
})
export default store
```
App.vue 文件:
```
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<p>GetCount: {{ getCount }}</p>
</div>
</template>
<script>
export default {
computed: {
count () {
return this.$store.state.count
},
getCount () {
return this.$store.getters.getCount
}
},
methods: {
increment () {
this.$store.commit('increment')
this.$store.dispatch('increment')
}
}
}
</script>
```
以上是一个简单的 Vuex 示例,可以通过按钮点击来增加 count 的值,并通过 getters 获取 count 的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)