Vuex的实战使用详解
写在前面
我是一个看技术的文档不喜欢官方的人，觉得官方写的任何东西都是比较正式的，让人有点不想看的赶脚，我这里也不贴官方的那个图了，这里也不解释了（其实是我也不想研究）所以我一般都是百度一些别人的经验之谈，看别人的经验之谈可以让你少踩一些坑，而且是可以直接看到效果的，所以这里也是，我们不按照官方的来，那么有利有弊，利就是好理解，弊就是可能写的不够专业，会让一些人误会，总之我权衡之后还是选择看着官方的一些东西然后结合自己的使用来说一下怎么玩这个vuex的。说实话我开始使用的时候觉得这个东西还是很好的，毕竟结合自己的需求，如果您的项目一直没有用到这个的地方可能体会不到，这里就开始写玩法。
什么是vuex
说白了就是一个可以全局管理状态的东西，用官方的话说是它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，说人话就是可以时刻监听一个值的状态改变，同时项目里面别的组件也可以使用这个变量。做出相应的处理。
安装
这个是万年不变的，没什么好说的。直接在项目里面运行下面这行代码
npm install vuex --save
我的业务场景
首先说一下业务场景，不然看代码是没有意义的，毕竟代码是为了解决业务的问题，我的业务是需要做一个机器的管理项目，那么这个机器有很多台，例如机器1、机器2等，那么想管理就需要将所有的机器先拿到，然后根据需要切换想设置的机器，view显示对应的机器的配置信息，需求是很明确的，我语言表达能力不行，直接看图。
这里简单的解释一下，有人说，这个不是很简单嘛，直接将切换的函数写到select的控件里面，直接点击切换的函数的时候直接给后端对应的uuid，拿到值就可以了，是的，如果只有这一个页面是可以的，但是仔细看布局，select组件是在一个公共组件里面的，你选择的时候你的uuid是不可以直接给到当前页面的，即时给到他，别的配置怎么办呢？而且我们要做的是切换的时候直接整个项目里面的uuid全部改掉，然后重新渲染整个数据，才是合理的解决方案。说一下我开始的想法，我开始是准备使用缓存做，每次用户切换的时候我都将最新的uuid放到缓存里面，但是有一个问题解决不了就是在别的页面怎么实时监听这个值改变了呢？所以，使用vuex是一个比较合理的解决方案，看代码
使用
新建一个store.js
引入
- 在store.js里面直接将下面的代码复制到里面
- 声明一个您需要监听的变量(store.js)
/**
* 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
})
页面使用
首先我们子啊公共组件也就是展示select组件的地方将切换事件处理一下
/**
* @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">总结
写到这里基本上的用法我写完了，可能写的没有那些大神写的详细，也没有什么原理分析，写的也比较浅显，我看很多人写博客的时候喜欢分析一下原理，一方面显的专业性比较高，一方面可以有利于自己的理解和别人的理解，首先我也是不经常使用这个技术栈，其次是我个人觉得用的好要比明白原理强，我不喜欢只讲原理一个例子都不写的人，毕竟例子是最可以发现问题的，也是最直观的，就写到这里吧，以后再更新，我写博客的目的是记录自己写项目的过程，记录用到的东西，以后用到了更深的再更新，希望可以帮助到人更好。写的不对的希望可以直接联系我，我及时纠正，谢谢大家的支持。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：如何在Vue中抽离接口配置文件