首先我們來說說，使用vuex的場景。

假設有這樣的兩個頁面，資料一樣，就是頁面佈局不一樣。同一份資料，我們在兩個頁面裡面操作兩次感覺還行，如果有10個，20個 ……頁面需要這樣，那麼這就是一個讓人奔潰的事情，而且資料的同步重新整理也很痛苦。所以就需要Vuex了。

雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇

vuex的使用方法：

1.資料夾目錄結構

在這裡，我把vuex的actions、getters、mutations分別抽離了出來，index引入這三個檔案，types用來做事件名稱的管理。

2.引用方法

在main.js中

引入store資料夾後，預設尋找index檔案

在元件中引用

mapActions中寫的是所有你要註冊的事件名稱，mapGetters中為輸出的資料

3.具體的檔案寫法

a.index.js

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

Vue.use(Vuex)

import actions from './actions'
import mutations from './mutations'

export default new Vuex.Store({
  modules:{
    mutations
  },//作為模板匯出，因為裡面包含了getters，state
  actions
})
 

b.actions.js

import * as type from './types'
//每個時間都在actions中提交
export default {
  send:({
         commit
       })=>{
    commit(type.SEND)
  },
  chat:({
          commit
        })=>{
    commit(type.CHAT)
  }
}

c.mutations.js

import {SEND,CHAT} from './types'
import  getters from  './getters'
import Data from '../data'
import localStrage from '../localStorage'

const state = {
  chatItems:[{
    "sender":"me",
    "img":"../src/assets/image/demo3.png",
    "text":Data.textarea
  }],
};
console.log(typeof state.chatItems);
const mutations = {
  [SEND](state){
    const localStrageArr = localStrage.getlocalStorage({"key":Data.route.params.num});
    const chatArr = state.chatItems;
    console.log(this);
    chatArr.push({
      "num":0,
      "sender":"me",
      "img":"../src/assets/image/demo3.png",
      "text":Data.textarea,
      "extra":"",
      "image":"",
      "shareLink":"",
      "time":Data.date
    })
    console.log(state.chatItems);
    localStrage.setlocalStorage(Data.route.params.num,localStrageArr.push({
      "num":0,
      "sender":"me",
      "img":"../src/assets/image/demo3.png",
      "text":Data.textarea,
      "extra":"",
      "image":"",
      "shareLink":"",
      "time":Data.date
    }));
    Data.textarea = "";
    console.log(Data.textarea)
  },
  [CHAT](sstate){
    console.log(Data.route)
    // localStrage.getlocalStorage({"key":Data.route.params.num});
    console.log(localStrage.getlocalStorage({"key":Data.route.params.num}))
    if(localStrage.getlocalStorage({"key":Data.route.params.num}) == undefined){
      localStrage.setlocalStorage({
        "key":Data.route.params.num,
        "data":[]
      })
    }else {
      state.chatItems = localStrage.getlocalStorage({"key":Data.route.params.num});
    }
    console.log(Data.route.params)
  }
};

export default {//匯出
  state,
  getters,
  mutations
}
 

d.getters.js

export default {
  chatItems(state){
    return state.chatItems;
  }
}

getters檔案在，mutations中引入

e.types,js

export const SEND='SEND'
export const CHAT='CHAT'

作為靜態資料匯出