Vuex的一些用法 - 蓝蓝设计_UI设计公司

帝皇彩票官网

Vuex的一些用法

2020-3-1 前端达人 前端及开发文章及欣赏

vuex的基础
1,状态管理(共享)
缓存数据==>内存, 只要刷新页面,数据就丢了
订单,详情等,,,不适用vuex缓存数据

用于

非父子通信的问题
缓存后端数据,提高用户体验
注意:
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: {

  }, // "全局"状态
  mutations:{

  },//唯一修改状态的地方
  //异步处理
  actions:{
  },
  // 对上面的“全局状态”进行数据处理, 类似于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自动调用时候,传来值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,为了防止页面刷新丢失数据,所以还得找到其他插件来帮忙

import createPersistedState from "vuex-persistedstate"; //在index.js页面加入这个插件

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


————————————————
版权声明:本文为CSDN博主「m0_46436313」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_46436313/article/details/104572076

标签: VUE

Powered by sitemap
迪士尼彩乐园登陆 百胜彩票投注 迪士尼彩乐园 安徽快3 迪士尼彩乐园 博发彩票开户 桔子彩票官网 上海11选5计划 吉利彩票开奖 北京两步彩APP