Vuex之理解state

1.什么是state

  • 上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actionsmutations对应于methods)。

  • 响应书存储state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新。(这里“状态”=“数据”),也就是是说数据和视图是同步的。


2.局部状态

  • 获取:在Vue组件中获取数据,最直接的可以通过计算属性中获取;

  • 组件仍然可以保存局部状态:虽然说VuexStore仓库让我们同一管理数据变得更加方便,但是代码一多也会变得冗长,有些组件的数据是自己严格自用,我们可以将state放在组件自身,作为局部数据,专供此组件使用,其他的组件不能用。


3.mapState

  • mapState的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中,this.$store.state

  • 使用示例

     import {mapState} from 'vuex' 
     export default {
      computer :
      mapState({
       count: state => state.count,
        'count' // 映射 this.count 为 store.state.count
      })
    }
  • 看看源码

    export function mapState (states) {
       const res = {}   //定义一个对象
       normalizeMap(states).forEach(({ key, val }) => {
        // normalizeMap()函数初始化states数据
             res[key] = function mappedState () {
               return typeof val === 'function'
               // 判断val是否是函数
               ? val.call(this, this.$store.state, this.$store.getters)
               // 若val是函数,将store的state和getters作为参数,返回值作为mapped State的返回值
               : this.$store.state[val]}})
           return res // 返回的是一个函数
        }
    //初始化方法
    -------------------------------------------------------------------------    
     function normalizeMap (map) {
            return Array.isArray(map) //判断state是否是数组
            ? map.map(key => ({ key, val: key }))
           // 是数组的话,调用map方法,将每一个数组元素转换成{key,val:key}
           : Object.keys(map).map(key => ({ key, val: map[key] }))
           // 否则就是对象,遍历对象,将每一个val变成val:key
       }
### Vuex工作原理 Vuex 是专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以规则保证以特定方式存取这些状态[^1]。 #### 核心概念解析 - **State**: 存储应用程序中的所有数据,任何Vue组件都可以通过`mapState`映射到局部计算属性中获取state的数据。 - **Mutations**: 提交更改 state 的唯一途径,必须是同步事务,在mutation函数里可以修改state里的数据[^2]。 - **Actions**: 类似于 mutation, 不同之处在于 action 可以包含任意异步操作,action提交的是mutations而不是直接变更状态。 ```javascript // 定义一个简单的mutation const mutations = { increment (state) { state.count++ } } // 使用actions处理异步逻辑并最终提交mutation const actions = { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } ``` #### 初始化与配置Store 为了使 `this.$store` 为 Vue 实例的一部分,需创建一个新的 Vuex.Store 实例并将其实例挂载至 Vue 中。这一步骤通常在 main.js 文件完初始化设置[^3]: ```javascript import Vue from 'vue' import App from './App.vue' import store from './store' // 导入store文件夹下的index.js new Vue({ render: h => h(App), store, // 将store注入根节点 }).$mount('#app') ``` #### 开发者工具支持 借助浏览器插件如[Vuex DevTools](https://github.com/vuejs/vuex/tree/dev/packages/devtools),开发者能够方便地查看每次状态变化前后的差异以及追踪触发这些改变的动作序列[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值