vuex的使用场景

vuex的实现

使用背景

在写供应商后台的时候，遇到一个场景，就是下拉框选择品牌和国家。一开始是每次遇到这种场景的时候，就加载一次相关数据。由于品牌和国家，尤其是国家，每次加载耗时都很长，就想着如何只加载一次。一开始决定用localstorage,后来选择了vuex.至于放弃前者，还是考虑到品牌后面可能会经常变化，如果不清除缓存，将不会实时更新。而vuex则不会有这种问题，接下里说一下vuex的使用方法。

vuex的使用方法

1.安装vuex， npm install vuex --save

2.新建一个js文件，引入vuex：import Vuex from ‘vuex’;import axios from “axios”;

3.创建一个store对象,包含了品牌和国家两个属性

const state = {
brand: [],
countryList: []
}
export default new Vuex.Store({
state,
mutations: {
UPDATE_BRAND (state) {
let para
axios({
method: 'get',
url: 'xxx',
responseType: 'jsonp'
}).then(json => {
const data = json.data.replace("callback(",'').replace(")",'')
const data1 = data.substring(0,data.length-1)
para = JSON.parse(data1).data.brand
state.brand = para
})
},
UPDATE_COUNTRY (state) {
let para
axios({
method: 'get',
url: 'xxx',
responseType: 'jsonp'
}).then(json => {
const data = json.data.replace("callback(",'').replace(")",'')
const data1 = data.substring(0,data.length-1)
para = JSON.parse(data1).data.brand
state.countryList = para
})
}
}
})

现在，可以通过 store.state来获取状态对象，以及通过store.commit方法触发状态变更
4.在入口文件main.js中获取store对象，并且执行store.commit方法，触发store中的axios请求，从而获取相应数据。

import store from './vuex/store'
store.commit('UPDATE_BRAND')
store.commit('UPDATE_COUNTRY')

注意：在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可

computed: {
brand() {
return this.$store.state.brand
}
}

总结：通过vuex将一些公共变量存储在了store中，使各个组件都能从store中获取某个状态，做到了数据的共享；并且将提交mutation的行为放在main.js，做到了只加载一次，降低了性能的消耗。