uniapp 使用store中存储的值
时间: 2023-07-30 16:07:10 浏览: 104
uniapp+vue3+pinia框架(模块化+持久化存储)
5星 · 资源好评率100%
在 Uniapp 中使用 Vuex 来管理全局状态,如果你需要在组件中使用 store 中存储的值,可以使用 `mapState` 函数来进行映射。
首先在你的组件中引入 `mapState` 函数:
```javascript
import { mapState } from 'vuex'
```
然后在组件的 `computed` 中使用 `mapState` 函数来映射 store 中的状态:
```javascript
computed: {
...mapState({
username: state => state.user.username,
token: state => state.user.token
})
}
```
这里的 `username` 和 `token` 是组件中需要使用的状态名称,`user` 是在 store 中定义的模块名称。这样就可以在组件中使用 `username` 和 `token` 这两个变量来访问 store 中存储的值了。
如果你需要在组件中修改 store 中的状态,可以使用 `mapMutations` 函数来映射 store 中的 mutations,例如:
```javascript
import { mapMutations } from 'vuex'
methods: {
...mapMutations({
SET_USERNAME: 'user/SET_USERNAME',
SET_TOKEN: 'user/SET_TOKEN'
}),
handleLogin() {
// 登录成功后调用 mutations 修改状态
this.SET_USERNAME('admin')
this.SET_TOKEN('abc123')
}
}
```
这里的 `SET_USERNAME` 和 `SET_TOKEN` 是组件中定义的方法名称,`user` 是在 store 中定义的模块名称。通过调用 `SET_USERNAME` 和 `SET_TOKEN` 方法,就可以修改 store 中存储的值了。
阅读全文