|
前言
项目中有一个中国省市的列表,每次使用都请求接口,就想把这个数据放到vuex中,每次使用get一下就好了。基于这样的目的来完成。记录一下
目录
/store
- index.js
- province.js
- getters.js
index.js
import vue from 'vue'
import vuex from 'vuex'
import province from './province'
import getters from './getters'
vue.use(vuex)
const store = new vuex.Store({
modules: {
province
},getters
})
export default store
province.js
import http from '../api/http'
const province = {
state: {
provinceList: []
},mutations: {
SET_PROVINCE (state,province) {
sessionStorage.setItem('province',JSON.stringify(province))
state.provinceList = province
}
},actions: {
getProvince ({commit,store}) {
http({
methods: 'get',url: '/common/get-province'
}).then((res) => {
//console.log(res)
if (res.data.errcode === 200) {
commit('SET_PROVINCE',res.data.data)
}
})
}
}
}
export default province
getters.js
const getters = {
provinceList: state => {
if (state.province.provinceList.length === 0) {
state.province.provinceList = JSON.parse(sessionStorage.getItem('province'))
}
return state.province.provinceList
}
}
export default getters
login.vue
登录的时候调用一下 actions 中的访问数据的接口
this.$store.dispatch('getProvince')
hellow.vue
页面中 使用computed 来把数据更新到页面上
computed: {
cityList () {
return this.$store.getters.provinceList
}
}
数据如何流转起来的
// 存储数据
1、首页登录的时候 this.$store.dispatch('getProvince') 一下;
2、调用了vuex中 actions 中的 getProvince;
3、actions 中的 getProvince 通过 axios 来访问接口获得数据；
4、访问接口成功， commit('SET_PROVINCE',res.data.data) 调用了 mutations 中的 SET_PROVINCE;
5、将上一步的数据 存入 seesionStroage 中，并更新到state中
// 读取
1、hello.vue 页面 在computed中 使用 return this.$store.getters.provinceList;
2、访问到了 getters.js 中的 provinceList， 先判断state中的数据是否为空，为空就从sessionStorage中读取并存到 state中 ，hello.vue页面就读取了数据
SF 的markdown 真难用 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
