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，做到了只加载一次，降低了性能的消耗。