Vuex入门

Vuex入门

什么时候会用Vuex

	当我们需要开发比较大型的单页面应用，需要多个组件共享状态的时候。

Vuex中，state是共享的数据，导入后我们可以在所有组件里使用state中的数据，而我们如果希望通过使用js来改变state使得所有组件中的数据发生变化，就需要通过Actions和Mutations。

	State：存放共用数据
	Actions：存放异步方法
	Mutations：存放同步的一些对数据的改变

Vuex中的其他概念：
getters：类似于计算属性，当我们需要使用state计算什么的时候可以创建，可以避免数据冗余；
modules：如果项目比较大，有很多功能的时候，所有数据都存放在一个state(Mutatitons等)文件里…项目的可维护性会很差。所以分成多个模块，每个模块都有各自的state、mutations等。最后再在store中整合模块。

举个例子

	一个应用中，当用户手动选择城市后，将数据反馈到首页的组件中。就可以将State里设置一个city属性，当用户选择城市后，调用Actions和Mutations里的方法改变State中的city值。(dispatch和commit都是上图中的方法)

handleCityClick (city) {
  this.$store.dispatch('changeCity',city)
  this.$router.push('/')
}

export default new Vuex.Store({
    state: {
        city: '北京'
    },
    actions: {
        changeCity (ctx,city) {
            ctx.commit('changeCity',city)
        }
    },
    mutations: {
        changeCity (state,city) {
            state.city = city
        }
    }
})

当然也可以直接在js中使用commit直接调用Mutations中的方法

handleCityClick (city) {
  this.$store.commit('changeCity', city)
  this.$router.push('/')
}

这里表面上是可以转换city了，但是刷新页面之后，city又会显示为默认值，所以还需要使用local Storage来完善。因为local storage在某些浏览器可能会报错，所以使用try…catch来防止。

let defaultCity = '上海'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  //   actions: {
  //     changeCity (ctx, city) {
  //       ctx.commit('changeCity', city)
  //     }
  //   },
  mutations: {
    changeCity (state, city) {
      state.city = city
      try {
        localStorage.city = city
      } catch (e) {}
    }
  }

当然，在开发中还是习惯将state和mutations放在单独的js文件中导入进来使用方便一些。