Vue方向：VueX状态管理配置/state/getter使用

Posted 2023-03-11

参考技术A         将VueX安装在生产环境依赖中

        npm  install  vuex  --save

     说明：

        1.   通过vue实例中的store选项

        2.   是为了将store对象挂Vue的原型$store上

        3.  这样所有的组件内部就可以使用 this.$store 来操作store

             所谓的单一状态树，用一个对象包含应用中全部的状态，这个对象作为唯一数据源而存在。也就是意味着每个应用只包含一个store实例。

             在组件中使用state中的数据

     示例总结：

        1.  可以直接修改Vuex中的状态（但不推荐），因为直接修改不利于调试

    1. 有的是我们对于store里的state中派生一些状态出来，如：数据的过滤

    2. 在获取数据后进行过滤处理，同样的逻辑可能会在不同的地方使用

    3. 在Vue中也可以采用计算属性进行处理（计算属性就是会将数据处理进行缓存的）

    4.  Vuex提供了一个getter，类似于store中的计算属性，根据依赖状态计算值后返回并缓存起来

    5.  只有当getter依赖的状态发生了改变时才会被重新计算

1.  Getter的第一个参数为状态state，用于收获Getter的依赖状态

2.  Getter的第二个参数

     Getter的第二个参数就是选项Getters，作用是用来获取其他Getter函数

3.  通过方法访问

  说明：

     1.  通常对于getter的使用方法，都是返回处理完毕后的数据

     2.  但是有的时候我们需要处理数据的条件是外部传递过来的，例如示例过滤价格

     3.  getter可以返回一个函数，这个函数用来接收外部传递的参数

总结：

    1、getter返回的不是确定的值而是一个函数

     2、那么此时在通过$store.getters.filterFruits获取到的就是一个函数

     3、既然是函数就可以当成方法使用, 传递参数

     4、如 $store.getters.filterFruits(20)