状态管理

类 flux 状态管理的官方实现方法
由于状态零散的分布在组件和组件的交互中，大型应用的复杂度也逐渐增加，为了解决这个问题，vue提供了vuex，vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试。

image.png

React开发者请参考以下信息

如果你是来自 React 的开发者，你可能会对 Vuex 和 Redux 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些简单绑定和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和改善过的开发体验。

简单状态管理起步使用

经常被忽略的是，vue应用中的原始数据对象的实际来源，当访问数据对象时，一个vue实例只是简单的代理访问。所以如果你有一个状态需要被多个实例共享的情况下，可以简单的通过维护一份数据来实现共享。

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

为什么要使用 vuex

试想这样的场景，一个vue实例下有一个根组件名为app.vue，他有2个子组件a.vue和b.vue，如果app想要与a和b进行通讯， 可以通过props传值，从父级到子级的方式。
但是如果需要在a与b之间进行通讯就比较麻烦了。
他们需要共有的父组件之间通过 自定义事件来进行通讯

image.png

这只是一条通讯路径，如果父组件下有多个子组件，子组件之间的通讯就会非常繁琐，父组件也需要监听大量的事件。还需要负责分发给不通的子组件，这显然就比较麻烦了，不适合在开发中大量使用。

vuex就可以解决这些麻烦

如何引入vuex

1.文件下载，cnpm install vuex --save
2.在main.js中添加引入和运用vuex

import Vuex from 'vuex'

Vue.use( Vuex );

const store = new Vuex.Store({
    //待添加
})

new Vue({
    el: '#app',
    store,
    render: h => h(App)
})

Vuex的核心概念

在使用 vuex 介绍核心概念之前，我们使用 vue-cli 初始化一个demo，准备以代码的形式说明 Vue 的核心概念。这个 demo 分为2个组件，produceListone.vue和productListtwo.vue，在app.vue的data中保存着商品列表，代码初始化和效果图如下：

image.png

代码结构：

app.vue
这里就是一个app中包含2个子组件，分别为productlistone和productlisttwo，然后将app中的data中的products中的数据传递进2个子组件，子组件通过props接收显示视图。

<template>
<div id="app">
    <productlistone :products="products"></productlistone>
    <productlisttwo :products="products"></productlisttwo>
</div>
</template>

<script>
import productlistone from './components/productListone'
import productlisttwo from './components/productListtwo'

export default {
    name: 'app',
    components: {
        productlistone,productlisttwo
    },
    data () {
        return {
            products: [
                {name: '鼠标', price: 20},
                {name: '键盘', price: 40},
                {name: '耳机', price: 60},
                {name: '显示屏', price: 80}
            ]
        }
    }
}
</script>

<style>
body{
    font-family: Ubuntu;
    color: #555;
}
</style>

productlistone.vue

//ProductListOne.vue
<template>
    <div id="product-list-one">
        <h2>Product List One</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data () {
        return {

        }
    }
}
</script>

<style scoped>
#product-list-one{
    background: #FFF8B1;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-one ul{
    padding: 0;
}
#product-list-one li{
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #E8800C;
}
</style>

productlisttwo.vue

//ProductListTwo.vue
<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['products'],
    data () {
        return {
            
        }
    }
}
</script>

<style scoped>
#product-list-two{
    background: #D1E4FF;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    padding: 10px 20px;
}
#product-list-two ul{
    padding: 0;
    list-style-type: none;
}
#product-list-two li{
    margin-right: 10px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(255,255,255,0.7);
}
.price{
    font-weight: bold;
    color: #860CE8;
    display: block;
}
</style>

两个子组件基本是类似的，都是通过获取父组件的props，生成相关内容。区别只有样式的不同。

核心概念 state

state就是vuex中的公共的状态，state也可以看作所有组件公共的data，用于保存所有组件公共的数据。

然后我们就可以把app.vue中的两个组件公共使用的data抽离开来，放入state中。代码如下：
首先我们先修改 main.js 中的内容：

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'

Vue.use(Vuex);
Vue.config.productionTip = false

/* eslint-disable no-new */


const store = new Vuex.Store({
  state:{
    products:[
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  }
})

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

这里我们主要做的如下操作：
1.在cnpm install vuex --save后引入vuex，并且用vue自带的api，启用，Vue.use(Vuex)
2.新建一个store变量，然后在里面新建一个 state,用于存放数据，product就是我们需要的数据之一。
3.在new Vue实例中，将store挂载进去。

当然main.js我们已经修改完了，productlistone和productlisttwo也需要做相应的修改，因为我们不需要使用原来的方式来获取数据了。尝试一下新的方法。

//ProductListOne.vue
export default {
    data () {
        return {
            products : this.$store.state.products //获取store中state的数据
        }
    }
}

//ProductListTwo.vue
export default {
    data () {
        return {
            products: this.$store.state.products //获取store中state的数据
        }
    }
}

总结子组件的修改：
1.我们去除了原有的props和这种获取数据的方式。
2.在data中新添加了变量 product，然后他的值我们从store中进行获取。this.$state.store.state一步步获取我们需要的数据。

两个组件的修改内容都是一样的，此时我们就已经初步修改完了，但是页面的视图其实是没有变化的，因为我们只是换了一种获取数据的方式而已，其他并没有什么变化。

核心概念: Getters

我讲 getters 的属性理解为所有 组件的 computed 属性，vuex的官方文档也说可以把 getters 理解为 store的计算属性，getters 返回的值会根据他的依赖被缓存起来。并且也只有他的依赖被改变的时候才会重新计算。

此时我们可以在main.js中添加一个 getters 属性，其中的 saleProducts对象将state中的价格减少一半。也就是说，这里在操作state中的数据并且返回新的数据。

//main.js
const store = new Vuex.Store({
  state:{
    products: [
      {name: '鼠标', price: 20},
      {name: '键盘', price: 40},
      {name: '耳机', price: 60},
      {name: '显示屏', price: 80}
    ]
  },
  getters:{ //添加getters
    saleProducts: (state) => {
      let saleProducts = state.products.map( product => {
        return {
          name: product.name,
          price: product.price / 2
        }
      })
      return saleProducts;
    }
  } 
})

我们继续修改main.js，新添加一个 getters的对象，然后里面放置一个新的方法 saleProducts，获取上面的state作为参数，进行循环，然后return一个新的数组。这个修改的数据源是从state中来的。因此当我们的state中的数据发生变化时，相应的 getters 计算出来的价格也会改变。

然后我们修改我们的子组件 productlistone.vue

export default {
    data () {
        return {
            products : this.$store.getters.saleProducts 
        }
    }
}

将productListOne.vue中的products的值更换为this.$store.getters.saleProducts
因为我们这次是从getters中返回的数据中进行获取的。
现在的页面中,Product List One中的每项商品的价格都减少了一半

image.png

核心概念 Mutations

我们可以把 Mutations 理解为store中的 methods，mutations保存着更改数据的回调函数。函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数。

下面我们在 store中添加 mutations属性，其中minusprice这个函数是用于将商品的价格减少 payload这么多，也就是我们第二个自定义的参数的量。

新添加的内容

  mutations:{
    minusPrice(state,payload){
      let newPrice=state.products.forEach(product=>{
        product.price-=payload
      })
    }
  }

刚才说过 mutations 可以当成是 methods，现在我们方法写好了，在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPrice方法

productlisttwo.vue组件中的改动：

<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            这里新增了一个按钮用于触发减价事件
            <button @click="minusPrice">减价</button>
        </ul>
    </div>
</template>

然后我们在 productlisttwo中注册这个minusprice方法， 在该方法中使用 commit，来执行store中 minusprice这个方法。
注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)

子组件的js部分作出如下修改：

<script>
export default {
    data () {
        return {
            products:this.$store.state.products
        }
    },
    methods:{
        minusPrice(){
            this.$store.commit('minusPrice',2);
            //如果需要触发store中的方法就需要使用commit，括弧中的minusPrice就是store中mutations中的方法名，第二个是自定义参数，也就是这里我们所需要减少的价格
        }
    }
}
</script>

image.png

核心概念 Action

action类似与mutation，不通在于：
1.action提交的是mutation，并不是直接修改状态
2.action中可以包含异步操作，mutation中不能够包含异步操作
3.action中的回调函数中第一个参数是context，这是一个与 store实例具有相同属性和方法的对象。

大致了解了以后，我们开始在其中添加 actions属性，其中的 minusPriceAsync 采用 settimeout来模拟异步操作。
这个方法可以用来改变 在mutation中改变的minusPrice
main.js中新添加内容：

  actions:{
//第一个参数是与store具有相同属性方法的实例，等于是把他数据复制过来进行修改了，第二个参数是一个自定义的参数
    minusPticeAsync(context,payload){
      settimeout(()=>{
        context.commit('minusPrice',payload);
      },2000)
    }
  }

以上代码等于是用与store一模一样的实例 context触发一个minusPrices的方法。

方法已经有了，现在准备一个按钮让他来触发它，
在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPriceAsync方法

productlisttwo中添加内容：

<template>
    <div id="product-list-two">
        <h2>Product List Two</h2>
        <ul>
            <li v-for="product in products">
                <span class="name">{{ product.name }}</span>
                <span class="price">${{ product.price }}</span>
            </li>
            <button @click="minusPrice">减价</button>
            第二个按钮是新添加的
            <button @click="minusPriceAsync">异步减少价格</button>
        </ul>
    </div>
</template>

在ProductListTwo.vue中注册minusPriceAsync方法, 在该方法中dispatchactions中的minusPriceAsync这个回调函数。

    methods:{
        minusPrice(){
            this.$store.commit('minusPrice',2)
        },
        minusPriceAsync(){
            this.$store.dispatch('minusPriceAsync',5)
        }
    }

这里的第二个方法是新添加的，意思就是通过按钮触发组件中的方法，组件中的方法再去store中出发 action中的方法。需要注意一下的是，action中的方法触发需要使用dispatch

image.png

store中属性作用总结

目前我们已经在store中使用了四种属性了，回顾一下
1.state：用于存储状态，相当于公共data，可以让所有引入的组件获取。
2.getters：相当于计算属性，可以以data中的数据源为基础，返回一个新的data，而且这个data是随着 state中数据的改变而改变的。
3.mutations：相当于methods，在这个属性中可以再添加方法，可以传递 state作为第一个参数，和第二个payload作为自定义参数。其他组件可以通过 commit 来调用这里的方法，来改变视图
4.action：大致和mutations类似，但可以用于异步操作。

核心概念 modules

由于使用单一的状态树，所有的应用状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就会变得非常的臃肿。

为了解决以上问题，Vuex允许我们将store划分成模块（modules），每个modules都拥有自己的 state,getters,mutations,actions。甚至是嵌套子模块，从上而下进行同样的分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态