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

Vuex 不是您可以在 Vue 中使用的唯一狀態管理選項（您也可以使用Redux），但它的主要優點是它是官方的，并且它與 Vue.js 的集成使它發光。

使用React，您將不得不選擇眾多可用庫中的一種，因為該生態系統龐大且沒有實際標準。最近 Redux 是最受歡迎的選擇，MobX 在流行度方面緊隨其后。使用 Vue，我什至要說除了 Vuex 之外，您不需要四處尋找任何東西，尤其是在開始時。

Vuex 借鑒了 React 生態系統的許多想法，因為這是 Redux 推廣的 Flux 模式。

如果您已經了解 Flux 或 Redux，那么 Vuex 會非常熟悉。如果你不這樣做，沒問題 - 我會從頭開始解釋每個概念。

Vue 應用程序中的組件可以有自己的狀態。例如，輸入框會將輸入的數據存儲在本地。這非常好，即使使用 Vuex，組件也可以具有本地狀態。

你知道當你開始做大量工作來傳遞一個狀態時，你需要像 Vuex 這樣的東西。

在這種情況下，Vuex 為狀態提供了一個中央存儲庫，您可以通過要求存儲來改變狀態。

每個依賴于特定狀態部分的組件都將使用 store 上的 getter 訪問它，這確保它在事情發生變化時立即更新。

使用 Vuex 會給應用程序帶來一些復雜性，因為需要以某種方式設置才能正常工作，但是如果這有助于解決無組織的 props 傳遞和事件系統，如果過于復雜，可能會變成意大利面條式的混亂，那么它就是一個不錯的選擇。

vuex的五個屬性

Vuex有五個核心屬性：state,getters,mutations,actions,modules。

1. state：vuex的基本數據，用來存儲變量
2. geeter：從基本數據(state)派生的數據，相當于state的計算屬性
3. mutation：提交更新數據的方法，必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數，提交載荷作為第二個參數。
4. ?action：和mutation的功能大致相同，不同之處在于 ==》1.Action 提交的是 mutation，而不是直接變更狀態。 2. Action 可以包含任意異步操作。
5. modules：模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { setInterval } from 'timers';
import { stat } from 'fs';
Vue.use(Vuex) 
const store = new Vuex.Store({
  state: {
    user_name: '',
    count: 0,
  },
  //設置
  mutations: {
     "SET_MSG": function (state, user_name) {
       state.user_name = user_name 
       console.log('保存', state.user_name)
     },
     // 設置計時器
     'SET_COUNT':function (state) {
      setInterval(function(){
       state.count++
      },1000)
     },

    
  },
  // 獲取
  getters: {
     "GET_MSG": function (state) {
       console.log('獲取1', state.user_name)
        return state.user_name
     },
     // 獲取計時器
    'GET_COUNT':function(state){
       return state.count
     },

  },
  actions: {
    "SET_MSG": function (state, user_name) {
      console.log('獲取2', state.user_name) 
      store.commit("SET_MSG", user_name)
    }
    
  },
  
})
 export default store

頁面中獲取

computed:mapGetters({ isBinding:"GET_BINDING_STATE", }), 頁面中提交

this.$store.commit( "SET_FACILITY_NAME_DATA", “value” );

Vuex有五個核心屬性用法：

state, getters, mutations, actions, modules。

1. state：vuex的基本數據，用來存儲變量

 state: {
    userId: '',
    name: '',
    token: '',
  }

在vue中使用 this.$store.state.userId

2. geeter：從基本數據(state)派生的數據，相當于state的計算屬性,具有返回值的方法

  getter: {
    userIdDouble: function(state){
      return state.userId * 2
  }

在vue中使用 this.$store.getters.userIdDouble

3. mutation：提交更新數據的方法，必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。

  mutations: {
    SET_USER: (state, userId) => {
      state.userId = userId
    },
    SET_TOKEN: (state, token) => {
      // console.log(token)
      state.token = token
    }
  },

commit：同步操作，寫法： this.$store.commit(‘mutations方法名’,值)
列如

	this.$store.commit('SET_USER','123456')

回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數，提交載荷作為第二個參數。

4. action：和mutation的功能大致相同，不同之處在于 ==》1. Action 提交的是 mutation，而不是直接變更狀態。 2. Action 可以包含任意異步操作。

  actions: { // {} 是es6中解構，把對象解構成屬性
    login({ commit }, value) {
      commit('SET_USER', value)
      // commit('SET_TOKEN', value2)
    },
    }

dispatch：異步操作，寫法： this.$store.dispatch(‘mutations方法名’,值)

5. modules：模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
簡單來說就是可以把以上的 state、mutation、action、getters 整合成一個user.js,然后放到store.js