Vuex使用

最新推荐文章于 2024-08-23 08:01:10 发布

原创最新推荐文章于 2024-08-23 08:01:10 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #vuex

Vue 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了Vuex状态管理模式在Vue.js应用程序中的使用方法。包括state、getters、mutations及actions的基本概念和实现方式，同时提供了插件推荐，如状态持久化、同步标签页等，帮助开发者更好地管理和维护应用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

在这里插入图片描述
1.state
当需要拿state里数据的时候

import {mapState} from 'vuex'
// import vuex from 'vuex'
// const mapState = vuex.mapState

computed: {
  ...mapState({
    formValidate: state => state.booking.order,
    dispatchList: state => state.dispatch.dispatchList
  }),

2.Getters
Store里创建方法

getters: {
ordergetters: (state) => {
return ‘orderID为：’ + state.order.orderId + ’ getters被调用了’
}
},
Getters实际上就是state的computed
…mapGetters([
‘ordergetters’
]),

然后像computed一样使用。
好处就是当一个store的state数据要在多个组件当中使用，就最好定义在getters里面，然后想上面一样使用就好了。
Computed默认情况下只有一个getter，没有setter
3 Mutations

porChange (porOption) {
  if (porOption) {
    // this.formValidate.seaInfo.por = porOption.pointCode
    this.$store.commit('porChanged', porOption.pointCode)
  } else {
    // this.formValidate.seaInfo.por = ''
    this.$store.commit('porChanged', ‘’)
  }
},
Booking.js
porChanged (state, params) {
  state.order.seaInfo.por = params
},

或

import {mapState, mapGetters, mapMutations} from 'vuex'

...mapMutations([
  'porChanged'
]),
porChange (porOption) {
  if (porOption) {
    this.porChanged(porOption.pointCode)
  } else {
    this.porChanged()
  }
},

4 actions
如果是异步请求，就是需要从接口中获取值的话，然后去修改state的话，就需要使用actions。

askingSearch (pageNum) {
  this.$store.dispatch('rfqAsingGetList', {
    pageNum: pageNum || this.askingList.pageNum,
    param: this.param,
    success: (data) => {
      const ids = []
      for (let i in data.list) {
        ids.push(data.list[i].askingId)
      }
      if (ids.length > 0) {
        this.$store.dispatch('rfqQuotationGetList', {
          askingIds: ids
        })
      }
    }
  })
},

然后actions里写请求的信息，

actions: {
  rfqAsingGetList (context, arg) {
    http.post(`/ms/ask/list.gou?pageNum=${isNaN(arg.pageNum) ? 1 : arg.pageNum}&pageSize=10`, arg.param).then(function (res) {
      // console.log(res)
      context.commit('_rfqAsingSetList', res.data.content)
      arg.success && arg.success(res.data.content)
    })
  },

通过commit去提交一个Mutations去修改store的值。

mutations: {
  _rfqAsingSetList (state, list) {
    state.list = list
  },

5插件
https://segmentfault.com/a/1190000012184535?utm_source=tag-newest
状态持久化https://github.com/robinvdvleuten/vuex-persistedstate
同步标签页、窗口https://github.com/xanf/vuex-shared-mutations
语言本地化https://github.com/dkfbasel/vuex-i18n
管理多个加载状态https://github.com/f/vue-wait
缓存操作https://github.com/superwf/vuex-cache

当数据需要持久化存储的时候，也就是当刷新浏览器改变的数据不会被改变的时候，就使用插件。

import saveInlocal from './plugin/saveInLocal'
在我们的store注册的地方也就是index.js里面使用这个插件。
plugins: [saveInlocal],

export default store => {
  if (localStorage.state) store.replace(JSON.parse(localStorage.state))
  store.subscribe((mutations, state) => {
    localStorage.state = JSON.stringify(state)
  })
}

6.v-model
我们在组件里想v-model state里的值的时候，不能使用直接赋值的形式。
而要使用get和set方法，使用get来获取state的值，，当要修改的时候，就使用set方法提交一个Mutations来改变那个值。

<CtnSetting v-model="containerList" :node="CtnNode.CONTAINER_NODE_PRE_BOOKING" :editCtnNo="false"></CtnSetting>


computed: {
containerList: {
  get: function () {
    return this.$store.state.booking.preBookingCtnList
  },
  set: function (val) {
    this.$store.commit('initPreBookingCtn', val)
  }
},

mutations: {
initPreBookingCtn (state, list) {
  state.preBookingCtnList = list
},