- 使用store管理数据 (vuex)---什么是vuex?基本使用/实现过程图/什么时候使用/优势
- 在如上使用中会有一个弊端就是每次刷新数据对象会重新加载为空,这时候可以考虑使用本地储存持久化。
- 监听vuex变化,如果数据改变就存放到本地储存
- 如果页面刷新就从本地储存中重新取出数据
- store与本地储存的区别是本地储存由于不属于
vue的一部分，没有实时更新的功能（需要刷新才重新渲染）nuxtjs中store不能直接使用浏览器的lcoalStorage方法，而且自己写数据同步功能比较麻烦,所以可以需要依赖一个插件vuex-persistedstate，该插件会把本地存储的数据存储到store。- 插件地址：github.com/robinvdvleu…
一、安装插件
npm install --save vuex-persistedstate
二、创建插件文件plugins/文件下面
需要创建一个
localStorage自定义插件用来引入第三方包 普通vue引入第三方的插件时, 可以直接在main.js入口文件的new Vue根实例创建之前, 添加代码,nuxt的机制是自定义插件,存放在plugins文件夹, 然后用配置进行引入创建插件的两步在根目录plugins中新建文件localStorage.js，加入以下代码
三、Nuxt环境下示例
console.log('开始了');
//在这个自定义插件中配置vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
//结构nuxt下的store
export default ({ store }) => {
//如果想要等到nuxt加载完毕再执行代码,可以使用window.onNuxtReady()函数
window.onNuxtReady(() => {
console.log();
createPersistedState({
//这里表示想要将vuex数据存放到localStore里面
// key:键名
key: 'store',
})(store)
})
}
四、配置
在
nuxt.config.js的plugins配置连引入插件,注意设置为false
plugins: [
'@/plugins/element-ui',
// '@/plugins/localStorage'
//这里的引入如果是普通字符串,就在服务端马上运行
//如果是要等到浏览器再运行的代码可以将配置改为对象,并且路径作为src传递
{
src: '@/plugins/localStorage',
//如果只在浏览器加载的代码,可以添加属性ssr:false
ssr: false
}
],
五、vue环境下示例
/* module.js */
export const dataStore = {
state: {
data: []
}
}
/* store.js */
import { dataStore } from './module'
const dataState = createPersistedState({
paths: ['data']
})
export new Vuex.Store({
modules: {
dataStore
},
plugins: [dataState]
})
