###
Vue.js 中 H5 使用
this.$store 存取数据的方法及示例
在
Vue.js 的开发中，`
this.$store` 是用于访问
Vuex 状态管理库的实例。
Vuex 是一个专门为
Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化[^1]。
以下是一个完整的示例，展示如何在 H5 环境中使用 `
this.$store` 进行数据的存取：
#### 1
. 安装
Vuex
首先需要安装
Vuex：
```bash
npm install
vuex --save
```
#### 2
. 创建
Vuex Store
创建一个名为 `store
.js` 的文件，配置
Vuex 的状态管理：
```javascript
import
Vue from '
vue';
import
Vuex from '
vuex';
Vue.use(
Vuex);
export default new
Vuex
.Store({
state: {
user: null, // 示例状态：用户信息
},
mutations: {
SET_USER(state, user) {
state
.user = user; // 修改状态中的用户信息
},
},
actions: {
setUser({ commit }, user) {
commit('SET_USER', user); // 触发 mutation 修改状态
},
},
getters: {
getUser: (state) => state
.user, // 获取状态中的用户信息
},
});
```
#### 3
. 在主应用中引入 Store
在主文件（如 `main
.js`）中引入并使用
Vuex Store：
```javascript
import
Vue from '
vue';
import App from '
./App
.vue';
import store from '
./store'; // 引入 store
new
Vue({
store, // 将 store 注入到
Vue 实例中
render: (h) => h(App),
})
.$mount('#app');
```
#### 4
. 在组件中使用
this.$store
在
Vue 组件中可以通过 `
this.$store` 访问
Vuex 的状态、方法和 getter：
##### 存储数据示例
通过 `
this.$store.dispatch` 调用 action 来存储数据：
```javascript
methods: {
saveUser() {
const userData = { name: 'John Doe', age: 30 }; // 示例用户数据
this.$store.dispatch('setUser', userData); // 调用 action 存储数据
},
}
```
##### 获取数据示例
通过 `
this.$store.getters` 获取存储的数据：
```javascript
computed: {
currentUser() {
return
this.$store.getters
.getUser; // 获取用户数据
},
},
```
#### 5
. 完整代码示例
以下是一个完整的组件示例，展示如何存取数据：
```html
<template>
<div>
<h1>User Information</h1>
<p>Name: {{ currentUser
.name }}</p>
<p>Age: {{ currentUser
.age }}</p>
<button @click="saveUser">Save User</button>
</div>
</template>
<script>
export default {
computed: {
currentUser() {
return
this.$store.getters
.getUser; // 获取用户数据
},
},
methods: {
saveUser() {
const userData = { name: 'John Doe', age: 30 }; // 示例用户数据
this.$store.dispatch('setUser', userData); // 调用 action 存储数据
},
},
};
</script>
```
### 注意事项
-
Vuex 的核心概念包括 `state`（状态）、`mutations`（同步更改状态的方法）、`actions`（异步操作触发 mutations）、`getters`（获取状态的计算属性）。确保理解这些概念以便正确使用[^1]。
- 如果需要持久化存储数据，可以结合 localStorage 或其他插件（如
vuex-persistedstate）实现[^5]。
本文讨论了在基于Vue应用中，如何利用Vuexstore存储登录接口返回的用户信息，以及在特定情况下不通过Vuex直接从接口获取数据并存储到localStorage的方法。
扫一扫
1820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
