Vuex(一)--为什么要使用Vuex

文章目录

1.Vuex(一)–为什么要使用Vuex
2.Vuex(二)–Vue核心概念State
3.Vuex(三)–Vue核心概念Getter
4.Vuex(四)–Vue核心概念Mutation
5.Vuex(五)–Vue核心概念Action
6.Vuex(六)–Vue核心概念Module
关于Vuex，可以看看官方文档-《Vuex 是什么？》。文档里面其实也说了为什么要使用Vuex。

单向数据流

以下是一个表示“单向数据流”理念的极简示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

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

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

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

Flux 架构就像眼镜：您自会知道什么时候需要它。

如果没有使用Vuex

假设有这样的两个页面，数据一样，就是页面布局不一样：

代码结构

/*
    文件：|-
    文件夹： |--
*/
|-- node_modules
|-- build
|-- config
|-- src
    |-- assets
    |-- components
        |- Page1.vue
        |- Page2.vue
   |-- router
        |- index.js
   |- App.vue
   |- main.js
|-- static
    |-- css
        |- main.css
|- index.html
|- package.json
|- README.md

代码

Page1.vue

<template>
    <div>
        <h2>我是第一个页面h2>
        <ul class="ul_list">
            <li v-for="item in items">
                <p class="name">商品：{{item.name}}p>
                <p class="price">价格：￥{{item.price}}p>
            li>
        ul>
    div>
template>

<script>
  export default {
     data() {
        return {
                items: [
                    {
                        name: '赣州橙子',
                        price: '8.8'
                    },
                    {
                        name: '新疆哈密瓜',
                        price: '2.0'
                    },
                    {
                        name: '山东大枣',
                        price: '3.2'
                    },
                    {
                        name: '阳澄湖大闸蟹',
                        price: '10.0'
                    }
                ]
        }
      },
   }
script>

Page2.vue

<template>
    <div>
        <h2>我是第二个页面h2>
        <ul class="ul_list page2">
            <li v-for="item in items">
                <p class="name">商品：{{item.name}}p>
                <p class="price">价格：￥{{item.price}}p>
            li>
        ul>
    div>
template>

<script>
  export default {
     data() {
        return {
                items: [
                    {
                        name: '赣州橙子',
                        price: '8.8'
                    },
                    {
                        name: '新疆哈密瓜',
                        price: '2.0'
                    },
                    {
                        name: '山东大枣',
                        price: '3.2'
                    },
                    {
                        name: '阳澄湖大闸蟹',
                        price: '10.0'
                    }
                ]
        }
      },
   }
script>

现在我们可以看见上面两个页面里面的数据是一样的。同一份数据，我们在两个页面里面操作两次感觉还行，如果有10个，20个 ……页面需要这样，那么这就是一个让人奔溃的事情，而且数据的同步刷新也很痛苦。所以就需要Vuex了。

代码地址

关于新建Vue项目《vue新建项目(一)vue-cli新建模板项目》。

代码地址：请点击我!。