Vuex 是什么？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种预测的方式发生变化。

简单来说

1.集中式存储管理状态

2.一种可预测方式发生变化

什么情况下应该使用 Vuex？

1.多个视图依赖于同一状态

2.来自不同视图的行为需要变更同一状态

read it

开始使用 Vuex

安装 Vuex 模块

npm install vuex --save

作为插件使用

Vue.use(Vuex)

定义容器

const store = new.Vuex.Store({
    // your code...
})

注入根实例

new Vue({

  el: '#app',

  store: store

...

})

Vuex 核心概念

store（仓库）：这是一个容器，它包含着你的应用中大部分的状态，状态存储是响应式的，不能直接改变 store中的状态

state（状态）：定义应用的单一状态树，用一个对象就包含了全部的应用层级状态

store.js

let store = new Vuex.Store({

  state: {

    count: 110       // 定义一个状态

  }

})

hello.vue

<template>

  <div>

    我是hello组件

    <p>{{ n }}</p>

  </div>

</template>

<script>

  export default {

    data () {

      return {

        n: this.$store.state.count      // n的初始值从vuex的state中拿

      }

    }

  }

</script>

getter（派分的状态）：抽离操作状态的逻辑，可被多组件使用

mutation（修改状态的唯一途径）：要使改变转台可被记录，必须要 commit 一个 mutation， mutation必 须使同步更新状态

store.js

let store = new Vuex.Store({

  state: {

    count: 110       // 定义一个状态

  },

  mutations: {

    updateCount (state,  payload)  {  // 改变state状态的

      state.count += payload.add

    }

  }

})

hello.vue

<template>

  <div>

    <p>我是hello组件</p>

    <p>{{ $store.state.count }}</p>

    <button @click="changeCount">改变count</button>

  </div>

</template>

<script>

  export default {

    methods: {

      changeCount () {

        this.$store.commit ('updateCount',  {

          add: 30

        })

      }

    }

  }

</script>

action（异步操作）：异步操作产生结果，action 提交的是 mutation，而不是直接变更状态

store.js

let store = new Vuex.Store({

  state: {

    shopList

  },

  getters: {

    totals (state) {

      return state.shopList.reduce((n,item)=>n+item.count,0)

    }

  },

  mutations: {

    updateCountById (state, payload) {

      // 只要提交mutations就有记录，如果mutation中

      // 有异步操作，记录的还是之前的值

      // 3秒之后改变数值

    /*setTimeout(() => {

      let item = state.shopList.find(item => item.id == payload.id)

      item.count += 1;

    }, 3000);*/

      let item = state.shopList.find(item => item.id === payload.id)

      item.count += 1;

    }

  },

  actions: {

    updateCountAction (store, parmas) {

      // 异步操作放在这里

      setTimeout(() => {

        store.commit('updateCountById', parmas)

      },3000)

    }

  }

})

hello.vue

<template>

  <div>

    Hello Vue

    <div :key="item.id" v-for="item in shopList">

      <button>-</button>

      <span>{{ item.count }}</span>

      <button>+</button>

    </div>

  </div>

</template>

<script>

  export default {

    computed: {

      shopList () {

        return this.$store.state.shopList

      }

    },

    methods: {

      add (id) {

        /* this.$store.commit('updateCountById', {

          id

        }) */

        this.$store.dispatch('updateCountAction', {

          id

        })

      }

    }

  }

</script>

几个原则

1.每个应用将仅仅包含一个 store 实例

2.更改 store 中的状态的唯一方法是提交 mutation

3.Action 可以包含异步操作

4.Action 提交的是 mutation，而不是直接变更状态