vuex 之 State

小小小胡IP属地: 浙江
字数 388

PS:

                                                   这只是个人笔记

                                                         这只是个人笔记

                                                                       这只是个人笔记

Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。每个应用将仅仅包含一个 store 实例.单状态树和模块化并不冲突

Vuex 通过store选项,提供了一种机制将状态从根组件『注入』到每一个子组件中(需调用Vue.use(Vuex))

通过在根实例中注册store选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过this.$store访

this.$store.state.count ,在获取到这些状态的时候多数都在计算属性中来获取

___以上仅仅是单状态树

mapState辅助函数

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余

import{mapState}from'vuex'  

使用mapState辅助函数帮助我们生成计算属性

computed:mapState({

  getMsg : state => state.app    // 箭头函数可使代码更简练

// 为了能够使用 `this` 获取局部状态,必须使用常规函数

        str(state){ //这里的state是一个全局的state状态

               return state.app.msg  + '  -  ' + this.count;  //这里的app使用的是 vuex中的模块化 中的app.js

       },

})

__State模块化

在 export default new Vuex.Store({ modules:{ app,} }) 传入 app.js 模块

在app.js模块中返回的时候主要 export default { state }

this.$store.state.oss.isUpdateObjectList  读取oss里面的state;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
0人点赞
小小小胡PHP爱好者
总资产56共写了1.2W字获得6个赞共5个粉丝

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,969评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,154评论 0 6
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,041评论 4 111
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,691评论 7 61
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,474评论 0 7