使用vuex存储数据
时间: 2023-11-08 19:05:57 浏览: 76
vue 实现通过vuex 存储值 在不同界面使用
在Vue.js中,Vu***享和管理数据,使得数据的流动更加清晰和可控。
使用Vuex存储数据的一般步骤如下:
1. 在Vuex中定义一个store对象,包含state、mutations、actions和getters等属性。
2. 在Vue组件中通过this.$store来访问store对象,并使用mapState、mapMutations、mapActions和mapGetters等辅助函数来简化代码。
3. 在组件中触发mutations或actions来修改state中的数据。
下面是一个简单的示例:
```
// 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: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
},
getters: {
doubleCount(state) {
return state.count * 2
}
}
})
export default store
```
```
// App.vue
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="increment">Increment</button>
<button @click="incrementAsync">Increment Async</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
computed: {
...mapState(['count']),
...mapGetters(['doubleCount'])
},
methods: {
...mapMutations(['increment']), ...mapActions(['incrementAsync'])
}
}
</script>
```
阅读全文