zoukankan      html  css  js  c++  java
  • vuex 浅认知

    什么是Vuex?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

    采用了集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    什么情况下我应该使用 Vuex?

    虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

    每一个 Vuex 应用的核心就是 store(仓库)。

      “store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

    3. this.$store.commit() 来触发状态变更(再次强调,我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。)

    核心概念:

    • State
    • Getter
    • Mutation
    • Action
    • Moudle

    项目结构:

    Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

    1. 应用层级的状态应该集中到单个 store 对象中。

    2. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

    3. 异步逻辑都应该封装到 action 里面。

    只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。

    对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:

    ├── index.html
    ├── main.js
    ├── api
    │   └── ... # 抽取出API请求
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── actions.js        # 根级别的 action
        ├── mutations.js      # 根级别的 mutation
        └── modules
            ├── cart.js       # 购物车模块
            └── products.js   # 产品模块









  • 相关阅读:
    .NET Core VS Code 环境配置
    系统架构正交分解法
    面向接口可扩展框架之“Mvc扩展框架及DI”
    发送和接收数据包
    Easticsearch通信方式_API
    Web Api集成Swagger
    NET MVC RazorEngine 解析模板生成静态页
    NET单元测试的艺术
    NET平台机器学习组件-Infer.NET
    ActiveMQ相关背景(转)
  • 原文地址:https://www.cnblogs.com/sweet-ice/p/10519811.html
Copyright © 2011-2022 走看看