VueX使用实例

一、Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

VueX类似一个公共数据仓库，由三部分组成

vuex.png

其中公共仓库又细分为三个模块，每个模块对应单独的功能

State 形似数据储存部分
Actions 驱动Mutations方法修改储存里的数据，通过Actions可以形成异步修改数据，和修改数据版本迭代记录
Mutations 可以略过Acitions方法进行数据修改，只是无法形成异步操作，例如网络请求回来的数据就需要用到异步
同时VueX还提供了一个Getter方法，从 store 中的 state 中派生出一些数据出来，类似vue中的计算属性。

二、具体实例代码

store部分代码

export default new Vuex.Store({
  state: {
    city: '北京'
  },
  // 不经过actions方法
  mutations: {
    changeCity(state, city) {
      state.city = city
    }
  },

  // 经过actions方法
  actions: {
    changeCity(ctx, city) {
      ctx.commit('changeCity', city)
    }
  },
  mutations: {
    changeCity(state, city) {
      state.city = city
    }
  },
  getters: {
    getLeval(state) {
        if(state.city == '北京')  return '一线城市'
        return '二线城市'
    }
  }
  modules: {
  }
})

事件调用VueX部分

let methods = {
  changCity(city) {
    this.$store.dispatch('changeCity', city) // changeCity 是actions里的方法名。经过actions方法
    this.$store.commit('changeCity', city)  // changeCity 是Mutations里的方法名。不经过actions方法
  }
};
//同理，可以采用更加简洁的辅助函数
import { mapMutations } from 'vuex'
let methods = {
  changCity(city) {
    this.changeCity(city)  // 调用下面mapMutations函数映射出的 changeCity 方法
  },
  ...mapMutations(['changeCity'])
}

vue中访问store数据

// 辅助函数访问
import {  mapState } from 'vuex'
let computed = {
  ...mapState(['city','xxx'])  //在页面中可以this.city即可访问store数据，getter同理
}

//通过属性访问
store.getters.getLeval