vuex的基本使用和理解

1、什么是vuex

1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式（官网解释）；
2. 通过创建一个集中的数据存储，供程序中所有组件访问；

2、vuex的主要组成部分

1. State：所有数据存储的位置
2. Getter：不改变原数据，对数据进行加工处理，然后使用（例：过滤多余数据）
3. Mutation：修改State里面数据的唯一方式
4. Action：可执行异步操作，完成后仍需要通过Mutation改变State里面的数据
5. Module：对以上（1，2，3，4）进行分割，形成多个模块，以便维护和使用

3、vuex的安装配置

npm install vuex --save

安装完成后，在src文件夹下新建store文件夹，里面新建以下文件：

1、index.js

//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//引入vuex的各个组成部分
import actions from './action'
import getters from './getter'
import mutations from './mutations'
//使用vuex
Vue.use(Vuex)
//创建数据存储位置
const state = {
  city: '北京'
}
 
export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations
})

2、getters.js

//getters
export default {
  handleCity: (state, getters) => {
    return state.city + ':操作city'
  }
}

3、mutation.js

//mutition
export default {
  setCity (state, amount) {
    state.city = amount
  }
}

4、action.js

//action
import Axios from 'axios'
export default {
  getCity ({commit, state, amount}) {
    console.log(amount)
    Axios.get('/city').then((res) => {
      commit('setCity', res.city)
    })
  }
}

注意：action.js文件内引入axios，是因为在VUE原型链上定义的 Vue.prototype.$axios = Axios 在action里面不管用，正式项目中不应如此使用，正确使用后续会详解。

新建完成后，在mian.js内操作：

//引入vuex仓库
import store from './store/index'
 
//使用
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

到此为止，vuex引入完成

3、vuex的使用

在上面vuex的安装配置时，已经在里面写好了需要使用的代码，下面是对以上的使用。

由于此次VUEX的使用仅仅是一个demo，所以我们在src下新建了一个vuex_demo的文件夹，里面新建了demo.vue

<!-- vuex demo -->
<template>
  <div class="vue_demo">
    <div>选择的城市：{{city}}</div>
    <div>选择的城市：{{handleCity}}</div>
    <div>
      本地修改：
      <input type="text" v-model="changeCity">
      <button @click="setCity(changeCity);">同步该表city</button>
    </div>
    <div>
      异步请求接口获取城市：
      <button @click="getCity">异步改变city</button>
    </div>
  </div>
</template>
 
<script>
//引入各项辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      changeCity: ''
    };
  },
  computed: {
    ...mapState(['city']),//引入state里面的city属性 解析成：this.city: this.$store.city
    ...mapGetters(['handleCity']) //引入getters里面的属性 解析成：this.handleCity: this.$store.getters.handleCity
  },
  methods: {
    ...mapMutations(['setCity']), 
    //引入mutation,改变state里面的city的方法 解析成：this.setCity: this.$store.commit('setCity'),
    //this.setCity(amount): this.$store.commit('setCity', amount)
    ...mapActions(['getCity'])
    //引入action异步改变state里面的city的方法 解析成：this.getCity: this.$store.dispatch('getCity')
    //this.getCity(amount): this.$store.dispatch('getCity', amount)
  }
};
</script>
<style lang='scss' scoped>
</style>

通过上面的代码可以看出vuex各个组成部分的使用方式，对其进行下解释：

1. state：可以通过this.$store来获取state里面的所有属性，放在计算属性内，当state里面的值改变时，会跟随改变，但是不允许修改
2. getters：在getters.js里面可以看到，创建了一个函数，接收state和getters，并return了一个数据，不改变state原数据，只加工数据，可以通过this.$store.getters获取所有属性，并放在计算属性内
3. mutation：修改state里面数据的唯一方式，可以接收state和传入的参数，使用方法： this.$store.commit(‘setCity’, amount)
4. action：提供了异步操作，可以接收commit、state和传入的参数，当异步操作完成后通过commit改变数据，使用方式：this.$store.dispatch(‘getCity’, amount)

注意：action接收参数的方式与其他不一样，需注意（commit，state）在一个对象内，传入的参数在外面