vuex 是用來解決 vue 多個元件之間的資料同步的問題

vuex包含 state 、getters 、mutations、actions，一個元件通過 mutations 來修改資料，另一個元件可以通過 getters 來獲取資料的副本，元件之間相互訂閱了資料

import Vue from 'vue'
import Vuex from 'vuex'

//註冊vuex外掛
Vue.use(Vuex)

//初始化user 如果存在就設為localStorage中的user，如果不存在就初始化為空
const user=JSON.parse(localStorage.getItem('user'))||{userName:null,phone:null,email:null}
//1、建立一個倉庫
export default new Vuex.Store({
    //倉庫的原始資料，可以預設，也可以通過ajax想後臺請求
    state:{  //屬性
        user
    },
    //訂閱資料變化 內容為方法
    getters:{   //屬性
        user(state){
            return state.user
        }
    },
    //定於方法以改變資料，使用this.$store.commit('login')呼叫
    mutations:{  //方法
        //只能傳兩個引數，第一個引數為倉庫物件，第二個引數設定為需要同步的引數，可以是陣列或者JSON物件，使用this.$store.commit('login','login')
        login(state,payload){
            state.user=payload
            //把user資訊存入到本地儲存中
            localStorage.setItem('user',JSON.stringify(payload))
        },
        loginOut(state){
            state.user={userName:null,phone:null,email:null}
            localStorage.removeItem('user')
        }
    },

    // actions 也是一個一對多的功能，可以同時觸發多個數據變化
    actions:{
        // CHUANGE_NUM(mutation){
        //     mutation.commit('changeC')
        //     mutation.commit('changeD')
        // }
        //等同於下面程式碼
        CHUANGE_NUM({commit}){
            commit('changeC')
            commit('changeD')
        }
    }
})
 

1、state 包含原始的資料，相當於一個倉庫，用來儲存資料，不可以直接修改

2、getters 是原始資料的副本，獲取 state 的值，不可修改

3、mutations 用來修改state中的資料

4、actions 用來提交 mutations 修改過後的資料

在main.js入口檔案中匯入vuex配置檔案，並在vue例項中新增store物件

import store from '../store/index.js'

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

在vue元件中使用以下程式碼修改vuex中的state資料

this.$store.commit('login',user)//第一個引數為mutations 中的方法，第二個引數為login 方法的實參