Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Does this plug-in support vue3.x #172

Open
tenPunchSuperman opened this issue Oct 25, 2021 · 7 comments
Open

Does this plug-in support vue3.x #172

tenPunchSuperman opened this issue Oct 25, 2021 · 7 comments

Comments

@tenPunchSuperman
Copy link

Does this plug-in support vue3.x ? And how to use on version vue3.x

@study-bing
Copy link

同问

@acrolink
Copy link

acrolink commented Jan 3, 2022

Same question.. Seems not..

@dreambo8563
Copy link
Contributor

@qingyanmaodai
Copy link

在utils/index文件上
import Storage from 'vue-ls';
export const store = Storage.useStorage({
namespace: 'vue-', name: 'ls', storage: 'local',
}).ls;
然后在页面按需引入import {store} from '@/utils'
使用store的set和get就可以了

@Big-Fruit
Copy link

可以用的,不过导出的时候好像必须用ls这个名字,
import Storage from 'vue-ls'
const options = {
namespace: 'testiiii__', // key prefix
name: 'testls', // name variable Vue.[ls] or this.[$ls],
storage: 'local', // storage name session, local, memory
}

const { ls } = Storage.useStorage(options)

export default ls
具体可见https://www.npmjs.com/package/vue-ls

@Big-Fruit
Copy link

也可以使用vue-lsp,这是另一个老哥基于这个写的,支持vue2.0和3.0

@tfoxy
Copy link

tfoxy commented Dec 8, 2023

To easily migrate multiple Vue 2 apps that are dependent on having $ls property, I used the following:

import { MemoryStorage, WebStorage } from 'vue-ls/src/storage'

// eslint-disable-next-line
const _global = typeof window !== 'undefined' ? window : global || {}

/**
 * @type {import('vue').Plugin}
 */
const VueStorage = {
  install(app, options = {}) {
    const _options = Object.assign({}, options, {
      storage: options.storage || 'local',
      name: options.name || 'ls',
    })

    if (
      _options.storage &&
      ['memory', 'local', 'session'].indexOf(_options.storage) === -1
    ) {
      throw new Error(`Vue-ls: Storage "${_options.storage}" is not supported`)
    }

    let store = null

    switch (_options.storage) {
      case 'local':
        store = 'localStorage' in _global ? _global.localStorage : null
        break

      case 'session':
        store = 'sessionStorage' in _global ? _global.sessionStorage : null
        break
      case 'memory':
        store = MemoryStorage
        break
    }

    if (!store) {
      store = MemoryStorage
      console.error(
        `Vue-ls: Storage "${_options.storage}" is not supported your system, use memory storage`,
      )
    }

    const ls = new WebStorage(store)

    ls.setOptions(
      Object.assign(
        ls.options,
        {
          namespace: '',
        },
        _options || {},
      ),
    )

    app.config.globalProperties[`$${_options.name}`] = ls
  },
}

export default VueStorage

This is based in https://github.com/RobinCK/vue-ls/blob/e5bc3388b9e4f6c860dae3b4ab2b89f33e939c60/src/index.js, but with the last part changed (app.config.globalProperties).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants
@tfoxy @dreambo8563 @acrolink @study-bing @tenPunchSuperman @Big-Fruit @qingyanmaodai and others