2019獨角獸企業重金招聘Python工程師標準>>>

state.js :

const state = {name:"123",age:456 }; export default state

store.js： 在main.vue中加入

import Vue from 'vue' import Vuex from 'vuex' import STATE from './state.js' Vue.use(Vuex);const store = new Vuex.Store({state: STATE,mutations: {set (state, keysVal) {let tmp = statelet keysTemp = keysVal.keys.split('.')let keys = []if (keysTemp.length > 2) {for (let i = 0; i < keysTemp.length; i++) {if (i > 1) {keys[1] = keys[1] + '.' + keysTemp[i]} else {keys[i] = keysTemp[i]}}} else {keys = keysTemp}keys.map((key, idx) => {if (idx === keys.length - 1 || idx === 1) {tmp[key] = keysVal.val} else {tmp[key] = {}tmp = tmp[key]}})},clean (state) {for (let key in INIT_STATE) {state[key] = INIT_STATE[key]}}} })export default store

index.js ： 需要使用狀態時引入

import store from './store'const env = process.env.NODE_ENVfunction _store (keys, val) {if (typeof val === 'undefined') {let keysTemp = keys.split('.')keys = []if (keysTemp.length > 2) {for (let i = 0; i < keysTemp.length; i++) {if (i > 1) {keys[1] = keys[1] + '.' + keysTemp[i]} else {keys[i] = keysTemp[i]}}} else {keys = keysTemp}return keys.reduce((v, k) => {if (v && v.hasOwnProperty(k)) {return v[k]} else {return null}}, store.state)} else {store.commit('set', {keys,val})} }function _storage (key, val) {let ciKey = 'vue_storage_' + envlet envData = _lstorage(ciKey)if (typeof val === 'undefined') {if (envData && envData[ciKey] && envData[ciKey][key]) {return envData[ciKey][key]} else {return null}} else {if (_storage(key)) {envData[ciKey][key] = val_lstorage(ciKey, envData)}if (!envData || typeof envData !== 'object') {envData = {}}if (!envData[ciKey]) {envData[ciKey] = {}}envData[ciKey][key] = val_lstorage(ciKey, envData)} }function _lstorage (key, val) {if (typeof val === 'undefined') {try {return JSON.parse(localStorage.getItem(key))} catch (e) {return null}} else {localStorage.setItem(key, JSON.stringify(val))} }function _ustorage (key, val) {let userData = _storage('user_data')const user = _storage('user')let uid = user ? user.user_id : nullif (!uid) {return null}if (typeof val === 'undefined') {if (userData && userData[uid] && userData[uid][key]) {return userData[uid][key]} else {return null}} else {if (_ustorage(key)) {userData[uid][key] = val_storage('user_data', userData)}if (!userData || typeof userData !== 'object') {userData = {}}if (!userData[uid]) {userData[uid] = {}}userData[uid][key] = val_storage('user_data', userData)} }function cleanUstorage () {_storage('user_data', {}) }function cleanStore () {store.commit('clean') }export default {store: _store,ustorage: _ustorage,storage: _storage,cleanUstorage,cleanStore }

使用方式

import store from '***/index.js'store.store(key); //獲取數據 store.store(key,value) // 保存數據 store.storage(key) // 從localstorage 獲取數據 store.storage(key,value) //保存數據到localStorage

轉載于:https://my.oschina.net/u/2528821/blog/1824972

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vuex封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。