vue基础-vuex

一，简介

https://vuex.vuejs.org/zh/
vuex是vue的数据框架
这里写图片描述

state：公用数据都存在state中
actions：异步处理，或批量的同步操作
mutations：改变state中的值（同步）

注意：有时可以略过action，组件直接调用mutations，修改state中的数据

二，安装和引入

npm install vuex –save
新建store文件夹，新建index.js文件，Vue.use(Vuex) 是Vuex作为插件引入的写法，公用数据state中的city

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: '上海'
  }
})

在主js(main.js)中引入index.js，并在根组件中引入store

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

三，使用state中公用数据

此时，可以在所有组件中调用公用数据了，因为在根组件中已经引入store
this.$store.state.city

<router-link to='/city'>
 <div class="header-right">
    {{this.$store.state.city}}
   <span class="iconfont arrow-icon">&#xe64a;</span>
 </div>
</router-link>

四，使用actions和mutations改变数据

改变当前城市的数据（通过点击热门城市改变）
在热门城市绑定一个点击事件，在点击事件中，派发事件action

 methods: {
      handleCityClick (city) {
          // 派发事件action
          this.$store.dispatch('changeCity', city)
      }
  }

在index.js中接收changeCity的action事件
再在action触发commit方法
再走到mutations中改变数据

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

五，简化

当没有异步操作时，可以去除action的过程，直接在点击事件中commit

 methods: {
      handleCityClick (city) {
          this.$store.commit('changeCity', city)
      }
  },

在mutations中改变数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    city: '上海'
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }
})

六，拆分index.js

就是细化成多个js文件，再引入进来
加入了本地存储localStorage，要加try catch，因为浏览器有些设置可能导致localStorage不可用而报错

state.js

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

export default {
  city: defaultCity
}

mutations.js

export default {
  changeCity (state, city) {
    state.city = city
    try {
          localStorage.city = city
    } catch (e) {}
  }
}

index.js

// 使用vuex实现数据共享
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
// Vuex作为插件引入的写法
Vue.use(Vuex)

export default new Vuex.Store({
  // 公用数据
  state,
  mutations
})

七，vuex的映射

vuex中的方法和数据可以映射到vue组件中，省去从vuex中调用

1，mapState

在计算属性computed中引入

<script>
import { mapState } from 'vuex'
export default{
  name: 'HomeHeader',
  computed: {
      ...mapState(['city'])
  }
}
</script>

调用可由this.$store.state.city 变成 this.city

也可以引入为对象

...mapState({
    currentCity: 'city'
})

调用可由this.$store.state.city 变成 this.currentCity

2，mapMutations

在方法methods中引入

import { mapState, mapMutations } from 'vuex'

 methods: {
      handleCityClick (city) {
//        this.$store.commit('changeCity', city)
          this.changeCity(city)
          this.$router.push('/')
      },
      ...mapMutations(['changeCity'])
  },

this.changeCity(city) 可以取代 this.$store.commit('changeCity', city)了

八，Getter

相当于组件的计算属性
在index.js中加入一个简单的计算

export default new Vuex.Store({
  // 公用数据
  state,
  mutations,
  // 相当于组件的计算属性
  getters: {
    doubleCity (state) {
        return state.city + ' ' + state.city
    }
  }
})

使用（和state一样）

<script>
import { mapState, mapGetters } from 'vuex'
export default{
  name: 'HomeHeader',
  computed: {
      ...mapState(['city']),
      ...mapGetters(['doubleCity'])
  }
}
</script>