国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > vuex項目中怎么使用?工作原理是什么?

vuex項目中怎么使用?工作原理是什么?

來源:千鋒教育
發布人:qyf
時間: 2022-09-16 16:22:25 1663316545

vuex項目中怎么使用

  原則:

   中小型項目中,如果組件的公共狀態不多的情況下,不建議使用vuex,反而會增加代碼復雜度,想要組件通信,直接通過event bus即可,中大型項目中,多個組件公共狀態較多情況下,建議使用vuex

  vuex的具體工作流程如下:

   在倉庫state中定義公共狀態,action中發送異步請求,得到數據后調用mutation 賦值給state,組件中使用state,也可以在組件中 dispatch action和觸發mutation來修改state,視圖刷新

  具體代碼如下:

  倉庫代碼

  const store = new Vuex.Store({

  state: {

  items: [] // 定義一個公共的購物車數據

  },

  getters: {

  // 可以基于已有的state 派生新的狀態

  selectedItems (state) {

  // 過濾購物車中未選中的商品

  return state.items.filter(item => item.selected)

  }

  },

  mutations: {

  // 定義mutation來修改state

  INIT_ITEMS(state, items){

  state.items = items

  }

  },

  actions: {

  // action可以發送異步請求,得到數據后commit mutation將請求結果傳入

  FETCH_ITEMS({commit}, params = {}){

  // 調用封裝好的 接口函數

  fetchItem(params).then(res => {

  if(res.data.code === 200) {

  commit('INIT_ITEMS', res.data.data)

  }

  })

  }

  }

  })

  組件中使用 使用vuex

  // 獲取state

  this.$store.state.items // 直接獲取

  {

  computed: {

  ...mapState(['items']) // 助手函數獲取

  }

  }

  // 獲取getters

  this.$store.getters.selectedItems // 直接獲取

  {

  computed: {

  ...mapGetters(['selectedItems']) // 助手函數獲取

  }

  }

  // 組件中提交action

  this.$store.dispatch('FETCH_ITEMS', {token: 'xxx'})

  {

  methods: {

  ...mapActions(['FETCH_ITEMS']) // 助手函數 直接調用this.FETCH_ITEMS(params)觸發

  }

  }

  // 組件中也可以直接commit mutation

  this.$store.commit('INIT_ITEMS'[,參數])

  {

  methods:{

  ...mapMutations(['INIT_ITEMS']) // 助手函數 直接調用this.INIT_ITEMS(參數)

  }

  }

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區
  • 南昌校區
  • 哈爾濱校區