伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

Vuex的一些用法

2020-3-1    前端達人

vuex的基礎(chǔ)

1,狀態(tài)管理(共享)

緩存數(shù)據(jù)==>內(nèi)存, 只要刷新頁面,數(shù)據(jù)就丟了

訂單,詳情等,,,不適用vuex緩存數(shù)據(jù)



用于



非父子通信的問題

緩存后端數(shù)據(jù),提高用戶體驗

注意:

vuex只能有一個store,

為了防止多人修改,我們切割成子store, 再合并成唯一一個大的store對象

模塊寫法

import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {

  }, // "全局"狀態(tài)
  mutations:{

  },//唯一修改狀態(tài)的地方
  //異步處理
  actions:{
  },
  // 對上面的“全局狀態(tài)”進行數(shù)據(jù)處理, 類似于vue中的計算屬性
  getters:{
  },

  modules:{
    cinema,
    tabbar
  }
})
export default store

2,子模塊的寫法

const module = {
  namespaced:true, //命名空間
  state :{
    cinemaList:[]
  },
  actions:{
    store.commit("setCinemaList",res.data.data.cinemas) //支持傳參
  },
  mutations:{
    setCinemaList(state,data){
      console.log("setCinemaList",data)
      state.cinemaList = data
    }
  },
  getters:{
    topDataList(state){
      //state形參s, vuex自動調(diào)用時候,傳來值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,為了防止頁面刷新丟失數(shù)據(jù),所以還得找到其他插件來幫忙

import createPersistedState from "vuex-persistedstate"; //在index.js頁面加入這個插件

// 加入下面的代碼
const store = new Vuex.Store({
  plugins: [createPersistedState({
    reducer(val){
      return {
        user: val.user
      }
    }
  })]


————————————————
版權(quán)聲明:本文為CSDN博主「m0_46436313」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/m0_46436313/article/details/104572076

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://cqzjtgb.com

存檔

四子王旗| 绩溪县| 台东县| 汤原县| 白城市| 米易县| 双辽市| 五莲县| 米泉市| 抚松县| 元朗区| 太谷县| 灯塔市| 阿拉善左旗| 武夷山市| 晋江市| 上高县| 宁波市| 抚松县| 石阡县| 虞城县| 遂昌县| 右玉县| 浪卡子县| 鹤山市| 梅河口市| 潼关县| 马鞍山市| 平凉市| 长沙市| 新野县| 石家庄市| 张掖市| 获嘉县| 综艺| 湖南省| 灵台县| 靖州| 洛阳市| 江口县| 彩票|