Vuex的实战使用详解

npm install vuex --save

/**
 * created by ClearLove
 * @aim 标题栏中需要更改自助机的uuid，所有的返回值都需要是该自助机下的数据，所以需要声明一个全局的可以监听uuid的变化
 * @params machine_uuid_flag 全局uuid
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const state = {
 machine_uuid_flag: '', //机器uuid
}

const getters = {
 getters_mac_uuid() {
  return state.machine_uuid_flag
 }
};
const mutations = {
 mutations_mac_uuid(state, mac_uuid) {
  state.machine_uuid_flag = mac_uuid
 }
};
const actions = {
 actions_mac_uuid(state, mac_uuid) {
  state.commit('mutations_mac_uuid', mac_uuid)
 }
};

export default new Vuex.Store({
 state,
 getters,
 mutations,
 actions
})

    /**
    * @change_machine 更改自助机
    */
   change_machine(machine_mac_uuid) {
    this.machine_id = machine_mac_uuid;
    // 这里是将最新的更换的机器的uuid，将store里面的uuid更换掉，这样才可以保证别的地方使用这个uuid的地方也会同时改变
    this.$store.dispatch('actions_mac_uuid',machine_mac_uuid);
    sessionStorage.setItem('machine_mac_uuid', this.machine_id)
   },

<el-select v-model="machine_name" placeholder="自助机列表" size="mini" @change="change_machine">
       <el-option
        v-for="item in machine_list"
        :key="item.mac_uuid"
        :label="item.machine_name"
        :value="item.mac_uuid">
       </el-option>
</el-select>

  created: function () {
   this.machine_mac_uuid = sessionStorage.getItem('machine_mac_uuid');
   this.machine_name = sessionStorage.getItem('machine_name');
   //将最新的uuid拿到
   this.update_mac_uuid = this.$store.state.machine_uuid_flag;
   this.get_settings_info()
  },
  /**
   * 接收store的改变的值
   */
  computed:{
   machine_uuid_flag(){
    //将接收到的最新的uuid return出去 
    return this.$store.state.machine_uuid_flag
   }
  },
  /**
   * 监听该store里面值的变化
   */
  watch: {
   //监听这个值是不是接收到，改变的话直接重新执行获取机器的方法
   machine_uuid_flag: function (newvalue , oldvalue) {
    this.update_mac_uuid = newvalue; //将最新的值传递给更新的对象
    this.get_settings_info();
   }
  },
  methods: {
   /**
    * @get_settings_info 获取某一台自助机的详情
    */
   get_settings_info() {
    this.$axios({
     method: 'post',
     url: this.api.api_zzj_9006 + 'manager_back/get_main_info/',
     data: {
      machine_uuid: this.update_mac_uuid "color: #ff0000">总结


写到这里基本上的用法我写完了，可能写的没有那些大神写的详细，也没有什么原理分析，写的也比较浅显，我看很多人写博客的时候喜欢分析一下原理，一方面显的专业性比较高，一方面可以有利于自己的理解和别人的理解，首先我也是不经常使用这个技术栈，其次是我个人觉得用的好要比明白原理强，我不喜欢只讲原理一个例子都不写的人，毕竟例子是最可以发现问题的，也是最直观的，就写到这里吧，以后再更新，我写博客的目的是记录自己写项目的过程，记录用到的东西，以后用到了更深的再更新，希望可以帮助到人更好。写的不对的希望可以直接联系我，我及时纠正，谢谢大家的支持。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。