arve0 / vue-persistent-state

Persist state to localstorage
https://www.npmjs.com/package/vue-persistent-state
11 stars 1 forks source link

index.js doesn't get compiled with babel/webpack #3

Closed flkc closed 6 years ago

flkc commented 6 years ago

The way I included the plug-in.

import persistentState from 'vue-persistent-state'

let initialState = {
    persisted: {
        rows: [],
            currency: 'USD',
            columnOrder: ''
    }
};
Vue.use(persistentState, initialState);

Webpack representation.


/***/ }),                                                                      
/* 183 */                                                                      
/***/ (function(module, exports, __webpack_require__) {                        

const store = __webpack_require__(184)                                         
const copy = __webpack_require__(195)                                          

exports.install = function (Vue, initialState) {                               
  // get state from localStorage                                               
  let state = {}                                                               
  for (let key in initialState) {                                              
    let val = store.get(key) || initialState[key]                              
    // initial population to localStorage                                      
    store.set(key, val)                                                        
    state[key] = val                                                           
  }                                                                            
  // make sure nested objects in initialState are not mutated                  
  state = copy(state)                                                          

  Vue.mixin({                                                                  
    data: function () {                                                        
      return state                                                             
    },                                                                         
    watch: createWatchers(state)                                               
  })                                                                           
  // make store API available through $store                                   
  Vue.prototype.$store = store                                                 
}                                                                              

function createWatchers (state) {                                              
  let watch = {}                                                               
  for (let key in state) {                                                     
    watch[key] = {                                                             
      deep: true,                                                              
      handler: function (newValue, oldValue) {                                 
        store.set(key, newValue)                                               
      }                                                                        
    }                                                                          
  }                                                                            
  return watch                                                                 
}

Code starts running again if I manually change 'consts' and 'lets' to 'vars'.

arve0 commented 6 years ago

Babel needs to be configured to transform the code, after which environment it is to be executed in.

https://babeljs.io/docs/plugins/preset-env/