Vue状态管理总结(存储公共数据及方法)

最新推荐文章于 2024-02-04 09:32:29 发布

【南汐】前端

最新推荐文章于 2024-02-04 09:32:29 发布

阅读量552

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55639808/article/details/130340814

版权

文章介绍了在Vue中管理状态的三种方法：通过原型链、在Vue实例的data中创建全局变量以及使用Vuex。Vuex适用于复杂项目，提供响应式状态管理，而localStorage用于跨页面数据持久化存储。Vuex和localStorage在存储位置、应用场景、响应式和永久性上存在区别。

摘要由CSDN通过智能技术生成

Vue状态管理总结

方法一:存储在Vue的原型链上 export + vue的prototype

1新建一个store目录，里面建立store.js，再导出
适用于全局公用的方法。

let store = {
  num:1,
  mySay:function(){
      console.log('my say!');
  }
}

export default store;              //注意，导出export default,而非export

在main.js引入,并挂载到vue原型链上.

import store from './store/store'
Vue.prototype.store = store;

3.访问调用
在相应的组件中，使用this.store即可调用。

this.store.num

方法二，在Vue构造函数实例化时，新增在data中，全局都可访问（main.js）

1.main.js 新增如下

new Vue({
  el: '#app',
  /add    存储公共的数据，所有子组件都可通过this.$root进行访问或修改
  data:{
    status:0
  },
  //add  公共方法
  methods:{
    say:function(){
      console.log('老大说，hellow');
    }
  },
  //add  公共的计算属性
  computed:{
    add:function(){
       return this.status+1;
    }
  },
  router,
  components: { App },
  template: '<App/>'
})

2.this.$root进行访问修改

let status = this.$root.status;
this.$root.say();

上述两种方法，都仅仅适用于状态比较简单的小型项目。如果状态过于复杂，则建议使用vuex

方法三，利用vuex

vuex常用用法学习
https://blog.csdn.net/yiyueqinghui/article/details/108108602

Vuex 和 localStorage 的区别

1、存储位置的区别

vuex 存储在内存中
localstorage 则以文件的方式存储在本地，只能存储字符串类型的数据

2、应用场景

Vuex 是一个专为 Vue应用程序开发的状态管理模式。vuex 用于组件之间的传值。

localstorage 是本地存储，是将数据存储到浏览器的方法，一般是在跨页面传递数据时使用。

3、是否在响应式

Vuex 能做到数据的响应式，localstorage 不能

4、永久性

刷新页面时 vuex 存储的值会丢失，localstorage 不会。