Vuex 中 this.store 是什么？怎么用？

在 Vue.js 的项目开发中，Vuex 是一个非常重要的状态管理模式，而 this.$store 更是其中频繁使用的关键对象，那 this.$store 究竟是什么呢？

this.$store 的本质

this.$store 是 Vuex 提供的一个全局的状态容器访问对象，它就像是一个大仓库的“管理员”，通过它我们可以方便地获取、修改和监听 Vuex 中存储的各种状态（state）。

this.$store 的基本使用场景

（一）获取状态（state）

假设我们在 Vuex 的 state 中定义了一个用户信息对象 userInfo，里面有 name 和 age 等属性，那么在组件中，我们可以通过 this.$store.state.userInfo 来获取这个用户信息对象。

```javascript export default { mounted() { const userInfo = this.$store.state.userInfo; console.log(userInfo.name); // 输出用户姓名 console.log(userInfo.age); // 输出用户年龄 } } ``` ### （二）提交 mutation

mutation 是 Vuex 中修改 state 的唯一方式，当我们需要改变 state 中的某个值时，就需要通过 this.$store.commit 方法来提交 mutation，我们有一个 mutation 叫做 UPDATE_USER_AGE，用于更新用户年龄：

```javascript // 在 Vuex 的 mutations 中定义 mutations: { UPDATE_USER_AGE(state, newAge) { state.userInfo.age = newAge; } }

// 在组件中使用 export default { methods: { updateAge() { this.$store.commit('UPDATE_USER_AGE', 30); // 假设新年龄是 30 } } }

### （三）分发 action
<p>action 通常用于处理异步操作，然后再提交 mutation，我们可以通过 this.$store.dispatch 方法来分发 action，我们有一个 action 叫做 FETCH_USER_DATA，用于从后端获取用户数据并更新到 state 中：</p>
```javascript
// 在 Vuex 的 actions 中定义
actions: {
  async FETCH_USER_DATA({ commit }) {
    const response = await axios.get('/api/user'); // 假设使用 axios 发送请求
    commit('UPDATE_USER_INFO', response.data); // 提交 mutation 更新用户信息
  }
}
// 在组件中使用
export default {
  methods: {
    async loadUserData() {
      await this.$store.dispatch('FETCH_USER_DATA');
      // 数据获取并更新后可以做一些后续操作
    }
  }
}

（四）获取 getters

getters 可以对 state 进行加工处理，就像计算属性一样，我们通过 this.$store.getters 来获取，我们有一个 getters 叫做 GET_USER_NAME_UPPERCASE，用于将用户姓名转为大写：

```javascript // 在 Vuex 的 getters 中定义 getters: { GET_USER_NAME_UPPERCASE(state) { return state.userInfo.name.toUpperCase(); } }

// 在组件中使用 export default { mounted() { const upperCaseName = this.$store.getters.GET_USER_NAME_UPPERCASE; console.log(upperCaseName); // 输出大写的用户姓名 } }

## 三、实际项目中的应用案例
<p>在一个电商项目中，购物车的状态管理就可以很好地体现 this.$store 的作用。</p>
### （一）添加商品到购物车
<p>当用户点击商品的“加入购物车”按钮时，组件通过 this.$store.dispatch 分发一个 ADD_TO_CART 的 action，这个 action 可能会先检查商品是否已经在购物车中（通过获取 state 中的购物车列表 this.$store.state.cartList），如果不在，就提交一个 ADD_ITEM mutation 来更新 cartList 状态。</p>
### （二）计算购物车总价
<p>我们可以在 Vuex 的 getters 中定义一个 GET_CART_TOTAL_PRICE，它会遍历 this.$store.state.cartList 中的每一个商品，根据商品的价格和数量计算出总价，然后在组件中，通过 this.$store.getters.GET_CART_TOTAL_PRICE 就可以轻松获取到购物车的总价，用于展示给用户。</p>
## 四、注意事项
### （一）组件与 store 的解耦
<p>虽然 this.$store 提供了便捷的访问方式，但在大型项目中，为了更好地实现组件与 store 的解耦，我们可以使用 mapState、mapGetters、mapMutations、mapActions 等辅助函数。</p>
```javascript
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
   ...mapState(['userInfo']), // 相当于 userInfo() { return this.$store.state.userInfo }
   ...mapGetters(['GET_USER_NAME_UPPERCASE']) // 相当于 GET_USER_NAME_UPPERCASE() { return this.$store.getters.GET_USER_NAME_UPPERCASE }
  }
}

（二）响应式问题

要注意,直接修改 this.$store.state 中的对象属性（如 this.$store.state.userInfo.name = 'newName'）虽然可能会生效，但这是不符合 Vuex 规范的做法，而且可能会导致一些响应式问题，一定要通过提交 mutation 的方式来修改 state。

this.$store 是 Vuex 中连接组件和状态管理的重要桥梁，熟练掌握它的各种用法，对于开发高效、可维护的 Vue.js 项目至关重要，无论是简单的状态获取，还是复杂的异步操作和状态更新，它都能发挥巨大的作用，帮助我们更好地管理应用的状态。