mapState（辅助函数）

科技前沿 • 2025-03-17 17:10 • 阅读 103

大家好，我是讯享网，很高兴认识大家。

状态管理分为三部分：state、view、actions。整个vuex核心是store，vuex的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接更改store中的状态，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
state：从store实例中读取状态的最简单方法是在计算书型中返回某个值。vuex通过store将状态从根组件“注入”到每个子组件中

当组件需要获取多个状态时，使用mapState辅助函数生成计算属性。

Getters：从state派生出的状态。（比如对数据进行加减运算、过滤等操作），使用mapGetters
Mutation：提交mutation是更改vuex的store中状态的唯一方式，必须同步。store.commit(’’)
Action类似于mutation，两点不同：

1）Action提交的是mutation，而不是直接变更的状态

2）Action可以包含任意异步操作

action通过store.dispatch触发，通过context.commit提交状态，通过context.state和context.getter获取state和getters

Modules：将store分割成模块

State
单一状态树
Vuex 用一个对象就包含了全部的应用层级状态。
作为唯一数据源，每个应用将仅仅包含一个 store 实例。
单状态树、模块化、状态、状态变更事件分布
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

computed: { 
    count: function () { 
    return this.$store.state.count } }

讯享网

讯享网每当 this.$store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。 state在vuex中的定位类似于data在vue中的定位：state(vuex) ≈ data (vue) 都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件。 也就是当你改变值的时候可以触发dom的更新.

state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.
当然使用data去接收$store.state也可以接收到值,但由于这只是一个简单的赋值操作,
因此state中的状态改变的时候不能被vue中的data监听到。

讯享网