快捷導(dǎo)航

vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解

更新時(shí)間：2022年10月18日 10:44:53 作者：長春小霸王

在瀏覽網(wǎng)頁時(shí)我們有些時(shí)候需要記住一些用戶選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下

一、Vuex是什么

Vuex是專門為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

1、Vuex的構(gòu)成

1）state

state是存儲(chǔ)的單一狀態(tài)，是存儲(chǔ)的基本數(shù)據(jù)。

2）Getters

getters是store的計(jì)算屬性，對(duì)state的加工，是派生出來的數(shù)據(jù)。就像computed計(jì)算屬性一樣，getter返回的值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生改變才會(huì)被重新計(jì)算。

3）Mutations

mutations提交更改數(shù)據(jù)，使用store.commit方法更改state存儲(chǔ)的狀態(tài)。（mutations同步函數(shù)）

4）Actions

actions像一個(gè)裝飾器，提交mutation，而不是直接變更狀態(tài)。（actions可以包含任何異步操作）

5）Module

Module是store分割的模塊，每個(gè)模塊擁有自己的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 = {
  //保存數(shù)據(jù)
  CHANGE_ACTIVE_LI(state, { id, code }) {
    state.id = id
    state.code = code
  },
   //清除數(shù)據(jù)
   SET_CLEAR_DATA(state,data){
    state.id=data
  }
}
const actions = {
  //保存數(shù)據(jù)
  changeSetting({ commit }, data) {
    commit('CHANGE_ACTIVE_LI', { id: data.id, code: data.code })
  },
  //清除數(shù)據(jù)
  clearVuex({ commit }) {
    commit("SET_CLEAR_DATA", null);
  },
 
}
export default {
  //解決模塊名沖突
  namespaced: true,
  state,
  mutations,
  actions

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

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

二、本地存儲(chǔ)

vuex存儲(chǔ)的數(shù)據(jù)會(huì)在頁面刷新后被移除，但本地存儲(chǔ)的數(shù)據(jù)卻不會(huì)。本地存儲(chǔ)分兩種：localStorage和sessionStorage

區(qū)別：

localStorage：可長期存儲(chǔ)數(shù)據(jù)，除非用戶清楚localStorage信息，否則數(shù)據(jù)會(huì)一直存在。同一中瀏覽器之間，不同頁面，數(shù)據(jù)可以共享。
sessionStorage：短期存儲(chǔ)數(shù)據(jù)，用戶關(guān)閉標(biāo)簽頁后或直接關(guān)閉瀏覽器后數(shù)據(jù)會(huì)清空。同一瀏覽器不同頁面之間，數(shù)據(jù)不可共享使用方法相同。

1.存儲(chǔ)數(shù)據(jù)

本地存儲(chǔ)可直接使用，不需要引入，代碼如下：

// 將this.pickerItem的數(shù)據(jù)存儲(chǔ)入insuranceCode,需提前轉(zhuǎn)化成string類型
localStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));
sessionStorage.setItem("insuranceCode", JSON.stringify(this.pickerItem));

2.取出數(shù)據(jù)

現(xiàn)在我要把數(shù)據(jù)放入vuex中存起來，相當(dāng)于把蘋果放入果盤，我們需要在頁面中的方法里面這樣使用，代碼如下：

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

3.清除數(shù)據(jù)

可清楚指定的數(shù)據(jù)，也可清楚所有數(shù)據(jù)，代碼如下：

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