Vuex中的State

State

单一状态树

一、什么是单一状态树
  • Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (Single source of truth)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
  • 但是,它是什么呢?我们来看一个生活中的例子。
    • 我们知道,在国内我们有很多的信息需要被记录,比如上学时的个人档案,工作后的社保记录,公积金记录,结婚后的婚姻信息,以及其他相关的户口、医疗、文凭、房产记录等等(还有很多信息)。
    • 这些信息被分散在很多地方进行管理,有一天你需要办某个业务时(比如入户某个城市),你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息,最后到一个地方提交证明你的信息无误。
    • 这种保存信息的方案,不仅仅低效,而且不方便管理,以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护,当然国家目前已经在完善我们的这个系统了)。
  • 这个和我们在应用开发中比较类似:
    • 如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。
    • 所以Vuex也使用了单一状态树来管理应用层级的全部状态。
    • 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。
二、在 Vue 组件中获得 Vuex 状态
  1. 引入Vuex:(类似于Vue-Router的使用方式)

这里我们使用一个计数器的案例做演示,首先,我们需要在某个地方存放我们的Vuex代码,这里,我们先创建一个文件夹store,并且在其中创建一个index.js文件,并在index.js文件中写入如下代码:

import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  state: {
    counter: 0,
  },
  mutations: {
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  }
})

// 3.导出store对象
export default store
  1. 挂载到Vue实例中

其次,我们让所有的Vue组件都可以使用这个store对象,来到main.js文件,导入store对象,并且放在new Vue
这样,在其他Vue组件中,我们就可以通过this.$store的方式,获取到这个store对象了

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

  1. 使用Vuex管理counter
<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloVuex',
    computed: {
      counter() {
        return this.$store.state.counter
      }
    },
    methods: {
      increment() {
        this.$store.commit('increment')
      },
      decrement() {
        this.$store.commit('decrement')
      }
    },
  }
</script>

<style scoped>

</style>
三、Vuex中的State使用总结
  1. 好的,这就是使用Vuex最简单的方式了。
  2. 我们来对使用步骤,做一个简单的小结:
    • 每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)
    • 提取出一个公共的store对象,用于保存在多个组件中共享的状态
    • store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到
    • 在其他组件中使用store对象中保存的状态即可
      • 通过this.$store.state.属性的方式来访问状态
      • 通过this.$store.commit('Mutations中方法')的方式来修改状态

注意事项:

  • 我们通过显式地提交Mutations的方式,而非直接改变$store.state.counter来修改counter状态。
  • 这是因为Vuex可以更明确的追踪状态的变化,同时可以使用官方提供的调试工具跟踪每一次的状态改变,所以不要直接改变$store.state.counter的值。
<think>好的,我现在需要帮用户解决如何在Vuex中获取state里的数据。用户之前已经询问过在另一个页面获取变化后的数据的问题,现在又进一步询问如何直接获取state里的数据,可能是因为他对之前的回答还有疑问,或者想更全面地了解不同的方法。 首先,我应该回顾之前给出的答案,确保这次回答保持一致但更详细。用户可能已经了解了基本的方法,但需要更清晰的步骤或更多的示例。要注意用户可能是新手,所以需要分步骤解释,避免使用过于专业的术语。 接下来,我需要考虑Vuex中获取state数据的几种常用方法。包括直接访问this.$store.state,使用mapState辅助函数,使用getters,以及在选项式API和组合式API中的不同用法。用户可能在使用Vue 2或Vue 3,所以需要分别说明,或者指出不同版本的差异。 用户的需求可能不仅仅是获取数据,还包括如何有效地管理和更新这些数据。因此,除了基本方法,还需要提供最佳实践和常见问题解决方案,比如响应式更新的注意事项,或者如何通过mutations修改state。 另外,用户之前的问题涉及到在另一个页面获取变化后的数据,说明他对Vuex的响应式机制可能感兴趣。在回答中应该强调Vuex的响应式特性,确保用户明白数据变更会自动反映在组件中,不需要手动刷新。 需要检查是否有遗漏的方法,比如在模块化store的情况下如何访问state,或者在组合式API中使用useStore的方式。这些高级用法可能对用户有帮助,但要根据用户的水平决定是否包含。 最后,确保回答结构清晰,分点列出,每个方法都有示例代码,并且说明适用场景。同时,提醒用户注意事项,比如直接修改state的问题,以及使用mutations的必要性,避免常见错误。 总结一下,回答需要涵盖: 1. 直接访问state的方法 2. mapState辅助函数的使用 3. getters的应用 4. 选项式API和组合式API的区别 5. 模块化store的情况 6. 注意事项和最佳实践 确保语言简洁,示例明确,帮助用户快速理解和应用。</think>在 Vuex 中获取 state 数据的 5 种常用方法详解(附代码对比): ```javascript // 基础 store 配置 const store = new Vuex.Store({ state: { users: [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ], loading: false }, getters: { activeUsers: state => state.users.filter(u => u.status === 'active') } }) ``` 一、基础访问方式(选项式 API) ```javascript // 方式1:直接访问(不推荐) export default { computed: { users() { return this.$store.state.users } } } // 方式2:使用 mapState(推荐) import { mapState } from 'vuex' export default { computed: { ...mapState(['users']), // 直接映射 ...mapState({ // 重命名 userList: 'users', isLoading: 'loading' }) } } ``` 二、组合式 API 访问(Vue3) ```javascript import { computed } from 'vue' import { useStore } from 'vuex' export default { setup() { const store = useStore() return { // 直接访问 users: computed(() => store.state.users), // 使用 getters activeUsers: computed(() => store.getters.activeUsers) } } } ``` 三、模块化场景访问 ```javascript // 模块 user.js export default { namespaced: true, state: () => ({ profile: { name: '王五' } }) } // 访问模块 state computed: { ...mapState('user', ['profile']), // 方式1 profile() { // 方式2 return this.$store.state.user.profile } } ``` 四、最佳实践指南 1. 优先选择方案: ```mermaid graph LR A[简单数据] --> B[mapState] C[需要处理] --> D[getters+mapGetters] E[组合式API] --> F[useStore+computed] ``` 2. 响应式注意事项: - 数组操作需使用变异方法:`push/pop/shift/unshift/splice/sort/reverse` - 对象新增属性需使用:`Vue.set(obj, 'newProp', 123)` 3. 调试技巧: ```javascript // 在控制台直接查看当前状态 console.log(this.$store.state) // 使用 Vue Devtools 的 Time Travel 功能 ``` 五、常见错误示例 ```javascript // 错误1:直接修改 state(违反单向数据流) methods: { updateName() { this.$store.state.users[0].name = '错误示范' // ❌ } } // 正确做法:通过 mutations this.$store.commit('UPDATE_USER', { id: 1, name: '正确示范' }) // 错误2:异步操作中直接获取可能过期的数据 async fetchData() { const users = this.$store.state.users // 可能不是最新数据 // 应该通过 getters 或 确保数据已更新 } ``` 六、性能优化建议 1. 对大数组使用缓存 getters 2. 使用模块化组织大型应用状态 3. 避免在组件中直接保存 state 的引用 ```javascript // 错误示例 data() { return { localUsers: this.$store.state.users // 失去响应性 } } ``` 通过以上方法,您可以在任何 Vue 组件中安全高效地获取 Vuexstate 数据。根据项目类型(选项式/组合式 API)和复杂度选择最适合的方案,同时注意遵循 Vuex 的单向数据流原则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值