vuex 之 State

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;

你可能感兴趣的:(vuex 之 State)