Vuex是什么？

VueX 是一個專門為 Vue.js 應用設計的狀態管理架構，統一管理和維護各個vue組件的可變化狀態(你可以理解成 vue 組件里的某些 data )。

Vue有五個核心概念，state, getters, mutations, actions, modules。

總結

state => 基本數據
getters => 從基本數據派生的數據
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以異步。
modules => 模塊化Vuex

State

state即Vuex中的基本數據！

單一狀態樹

Vuex使用單一狀態樹，即用一個對象就包含了全部的狀態數據。state作為構造器選項，定義了所有我們需要的基本狀態參數。

在Vue組件中獲得Vuex屬性

•我們可以通過Vue的Computed獲得Vuex的state，如下：

const store = new Vuex.Store({  state: {    count:0  }})const app = new Vue({  //..  store,  computed: {    count: function(){      return this.$store.state.count    }  },  //..})

下面看下vuex操作state對象的實例代碼

每當 store.state.count 變化的時候, 都會重新求取計算屬性，并且觸發更新相關聯的 DOM。

每一個 Vuex 應用的核心就是 store（倉庫）。

引用官方文檔的兩句話描述下vuex：

1，Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。

2，你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

使用vuex里的狀態

1，在根組件中引入store，那么子組件就可以通過this.$store.state.數據名字得到這個全局屬性了。

我用的vue-cli創建的項目，App.vue就是根組件

App.vue的代碼

<template> <div id="app">   <h1>{{$store.state.count}}</h1>    <router-view/> </div></template><script> import store from '@/vuex/store';export default { name: 'App', store}</script><style></style>

在component文件夾下Count.vue代碼

<template> <div>   <h3>{{this.$store.state.count}}</h3> </div></template><script>   export default {    name:'count'，  }</script><style scoped></style>

store.js的代碼

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex);const state = { count: 1}export default new Vuex.Store({ state，})

2，通過mapState輔助函數得到全局屬性

這種方式的好處是直接通過屬性名就可以使用得到屬性值了。