1. 使用localStorage要使用try-catch進行包裹 ~~~ import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) function getCity(){ var defaultCity="新疆"； try { if(localStorage.getItem("city")){ defaultCity=localStorage.getItem("city") } } catch (error) { console.log(error) } return defaultCity; } export default new Vuex.Store({ //相當于data state: { letter:"", //取緩存 city:getCity() // city:"" }, mutations: { changeLetter(state,letter){ state.letter=letter }, changeCity(state,city){ // 設置緩存要使用trycatch包裹 try { localStorage.setItem("city",city) } catch (error) { console.log(error) } state.city=city } }, //接收子組件傳遞的事件1 將改變的值傳給mutations actions: { changeLetter(ctx,letter){ // console.log(letter); // 通過commit傳遞 ctx.commit("changeLetter",letter) } } }) ~~~ 2. 封裝vuex ~~~ 1. 新建store文件將store放入，修改min.js文件路徑，將vuex中的模塊拆分 //store.js import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ //相當于data state, mutations, //接收子組件傳遞的事件1 將改變的值傳給mutations actions: { changeLetter(ctx,letter){ // console.log(letter); // 通過commit傳遞 ctx.commit("changeLetter",letter) } } }) //state.js function getCity(){ var defaultCity="新疆"; try { if(localStorage.getItem("city")){ defaultCity=localStorage.getItem("city") } } catch (error) { console.log(error) } return defaultCity; } export default{ letter:"", //取緩存 city:getCity() // city:"" } //mutations.js export default{ changeLetter(state,letter){ state.letter=letter }, changeCity(state,city){ // 設置緩存要使用trycatch包裹 try { localStorage.setItem("city",city) } catch (error) { console.log(error) } state.city=city } } ~~~