uniapp可以使用vuex vue3
时间: 2025-07-06 22:49:15 浏览: 1
### 集成Vuex至UniApp与Vue 3
为了在基于Vue 3的UniApp项目中集成Vuex,需遵循特定步骤来设置状态管理库。首先,在项目的`src/store/index.js`文件内初始化Vuex Store。
```javascript
import { createStore } from 'vuex'
export default createStore({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment({ commit }) {
commit('increment')
}
},
getters: {
getCount: (state) => state.count
}
})
```
此配置创建了一个简单的Vuex Store实例[^1],其中包含了基本的状态、变异函数(mutations)、动作(actions),以及获取器(getters)定义。
接着,在应用入口文件`main.js`中安装Vuex插件:
```javascript
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
render: h => h(App),
store, // 将store注入到根组件之下
}).$mount('#app')
```
上述代码片段展示了如何通过提供选项的方式将Store对象传递给新的Vue实例,从而使得整个应用程序都可以访问该Store中的数据[^2]。
对于页面内的具体操作,可以采用如下方式读写存储的数据:
#### 使用 `this.$store.*` 访问 State/Getter 或触发 Mutation/Action
可以直接利用`this.$store.state.*`, `this.$store.getters.*`, `this.$store.commit(*[, payload])`, 和 `this.$store.dispatch(*[, payload])` 来分别获取状态值、计算属性的结果或是执行变更逻辑和异步任务[^3]。
#### 利用辅助函数简化映射关系
借助于`mapState`, `mapGetters`, `mapMutations`, 及 `mapActions` 辅助工具,可以在组件内部更加便捷地绑定这些功能点。例如:
```html
<template>
<div>{{ text }}</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
computed: {
...mapState(["text"]),
...mapGetters(["formattedText"])
},
methods: {
...mapMutations(["setText"]),
...mapActions(["fetchData"])
}
};
</script>
```
这段脚本说明了怎样把来自Vuex Store里的多个成员一次性映射成为当前组件自身的计算属性(computed properties)或方法(methods)[^3]。
阅读全文
相关推荐


















