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
},