uniapp vue3 页面 获取 store 的值
时间: 2023-11-30 22:03:20 浏览: 185
在 Vue 3 + uni-app 中,可以使用 `vuex@4` 来管理全局状态,可以通过 `useStore` 函数来获取 `store` 中的值。具体步骤如下:
1. 在 `store` 文件夹下创建一个 `index.js` 文件来创建 `store` 实例,并定义全局状态。示例代码如下:
```javascript
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store
```
2. 在 `main.js` 文件中引入 `store` 实例并挂载到根组件上。示例代码如下:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
```
3. 在页面中通过 `useStore` 函数来获取 `store` 中的值。示例代码如下:
```javascript
<template>
<div>
<p>count: {{ count }}</p>
<button @click="incrementCount">increment</button>
</div>
</template>
<script>
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
const incrementCount = () => {
store.commit('increment')
}
return {
count,
incrementCount
}
}
}
</script>
```
这样就可以在页面中获取 `store` 中的值了。注意,在 Vue 3 中使用 `computed` 函数来获取 `store` 中的值。
阅读全文