vuex存储数据的几种方法实例详解

目录

• 一、Vuex是什么
• 1、Vuex的构成
• 2、Vuex的使用
• 二、本地存储
• 1.存储数据
• 2.取出数据
• 3.清除数据
• 总结

一、Vuex是什么

Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1、Vuex的构成

1）state

state是存储的单一状态，是存储的基本数据。

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

2、Vuex的使用

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const state = {
 id:null,
 code:null,
 
}
const mutations = {
  //保存数据
  CHANGE_ACTIVE_LI(state, { id, code }) {
    state.id = id
    state.code = code
  },
   //清除数据
   SET_CLEAR_DATA(state,data){
    state.id=data
  }
}
const actions = {
  //保存数据
  changeSetting({ commit }, data) {
    commit('CHANGE_ACTIVE_LI', { id: data.id, code: data.code })
  },
  //清除数据
  clearVuex({ commit }) {
    commit("SET_CLEAR_DATA", null);
  },
 
}
export default {
  //解决模块名冲突
  namespaced: true,
  state,
  mutations,
  actions
 

 next() {
 //这里的product/changeSetting是指定vuex中的方法，我这里指定把后面的对象加在prouduct中changeSetting方法里面去
      this.$store.dispatch("product/changeSetting", {
        id: this.id,
        code: this.code,
      });
    },

//取出vuex中proudct.js中的id的值
  this.id = this.$store.state.product.id;

二、本地存储

vuex存储的数据会在页面刷新后被移除，但本地存储的数据却不会。本地存储分两种：localStorage和sessionStorage

区别：

• localStorage：可长期存储数据，除非用户清楚localStorage信息，否则数据会一直存在。同一中浏览器之间，不同页面，数据可以共享。
• sessionStorage：短期存储数据，用户关闭标签页后或直接关闭浏览器后数据会清空。同一浏览器不同页面之间，数据不可共享使用方法相同。

1.存储数据

本地存储可直接使用，不需要引入，代码如下：

// 将this.pickerItem的数据存储入insuranceCode,需提前转化成string类型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));

2.取出数据

现在我要把数据放入vuex中存起来，相当于把苹果放入果盘，我们需要在页面中的方法里面这样使用，代码如下：

 JSON.parse(localStorage.getItem("insuranceCode"));
JSON.parse(sessionStorage.getItem("insuranceCode"));

3.清除数据

可清楚指定的数据，也可清楚所有数据，代码如下：

// 清除insuranceCode
localStorage.removeItem("insuranceCode");
sessionStorage.removeItem("insuranceCode");
// 清除所有
localStorage.clear();
sessionStorage.clear();

总结

到此这篇关于vuex存储数据的几种方法的文章就介绍到这了,更多相关vuex存储数据内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！