前情提示：有一天，我要实现一个效果→点击某个按钮改变一个全局变量，并且要让绑定了该变量的所有位置异步渲染。我试过用一个全局的js文件存放该变量，该变量值虽然改变了，但是没有做到异步渲染。接着我用window.全局变量的方式，尼玛！还没打开页面给我报错"全局变量 of undefined"，我才想起页面还没加载完的时候window全局对象都是空值！这让我如何是好？于是我琢磨了下有个叫做Vuex玩意儿，故摆弄一下，也分享给大家！

我看了官方文档，也看了很多论坛大牛的博客，发现大家都在src下面创建一个sotre文件夹，然后创建4个文件：index.js、getters.js、actions.js、mutations.js。我去~搞这么麻烦？？？我差点就放弃了~

仔细琢磨了一番，发现就一个文件即可实现的事情非得搞那么麻烦，大家都很忙，何不让自己更加轻量化一点？终于明大部分程序猿发际线靠后、女朋友找不到的理由(坏笑)了，净花在这种冗余的开发上面了！不废话一个文件搞定，建议无脑复制直接淦！！！

在src/js文件夹下面创建vuex.js文件（注意文件名小写，避免和Vuex冲突）

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({//【全局变量】state: {//_qiangGe是全局变量名（我习惯_开头代表全局变量）_qiangGe: false,},//【获取值】getters: {_qiangGe: state => state._qiangGe,},//【中间件】mutations: {_qiangGe: (state, value) => (state._qiangGe = value),},//【修改值】actions: {//__qiangGe是全局方法（我习惯__开头代表全局方法）__qiangGe: ({ commit }, value) => commit('_qiangGe', value),},
});

在src/js/main.js中引入vuex.js（注意我的main.js和vuex.js是在同一个目录下的，所以参考自己项目的相对路径来引入，别和我一样）

//……这里省略若干代码片段import Vue from 'vue';
import vuex from './vuex';//……这里省略若干代码片段import App from '../vue/App';//这个是我的App.vue文件路径（仅供参考）
new Vue({ el: '#app', render: h => h(App), router, store:vuex });//这里store:vuex是关键（没它啥都别想干！）

然后去一个想要出发修改全局变量_qiangGe的vue页面加入如下代码

<template><button @click="__qiangGe(!_qiangGe)">{{ _qiangGe ? "强" : "弱" }}</button>
</template><script>
import { mapGetters, mapActions } from "vuex";
export default {computed: {...mapGetters(["_qiangGe"]), // 【获取值】等同于this.$store.getters._qiangGe},methods: {...mapActions(["__qiangGe"]), // 【修改值】等同于this.$store.dispatch('__qiangGe','要修改的值'))},
};
</script>

cnpm run dev跑起来~~~

你会看到一个按钮上面有个“弱”，来回点击它，将会在“强/弱”之间来回切换。

刚刚好3分钟过去了，你学会了吗？

只需三分钟！只需创建一个vuex.js文件，让你马上学会使用Vuex，尽管Vuex是个鸡肋！(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧！)相关推荐

三分钟教你创建一个简易服务器
第一步: 创建一个文件夹 >在文件夹里面打开小黑窗> 输入npm init --yes > 创建一个js文件启动服务器在小黑窗里面执行node 这个js文件的名称这里要注意 ...
java和python的比较-如何对比Python和Java，只需三分钟告诉你！
原标题:如何对比Python和Java,只需三分钟告诉你! Java和Python两门语言都是目前非常热门的语言,可谓北乔峰南慕容,二者不分上下,棋逢对手.但是对于初学者来说,非常困惑,因为时间和精力 ...
职场神器：只需三分钟，AI工具让我变成插画师
绘画技能一般来说,搞技术的,写文章的,在绘画的这棵技能树上的加点往往都是零. 而且绘画和音乐这些技能往往是需要一定天赋的,它不像写代码和开挖机,后两者往往经过培训以后人人都能学会,而前两者没有一点天 ...
别再说不了解非接触液位传感器了?只需三分钟就能搞懂
非接触式液位传感器,顾名思义就是不用接触物体就能进行监测,从而避免遭到被监测物体的腐蚀等.那关于非接触式液位传感器,大家了解多少呢?今天TCOOP就来给大家详细介绍下,三分钟就能搞懂,快来看看吧! 一 ...
三分钟让你也拥有一个很酷炫的GitHub展示页面(保姆级教程)
目录让我们开始吧! 1.创建一个新的存储库 2.更新README文件 3.✨美化您的个人资料!✨ GitHub README 统计 GitHub 个人资料奖杯添加标题或封面图片添加浮动图像或 G ...
职场神器：只需三分钟，让ChatGPT帮我写周报
说到周报,尽管周报的目的是为了提高团队合作和项目进展的透明度,但很多职场员工都觉得是件麻烦事. 本来忙碌了一周到周五的下午,工作完成了,可以下班去吃饭,去嗨皮了,结果临走前还得写一份"每周工 ...
只需3分钟，轻松明白一个网页是如何制作的
开篇寄语: 我们之所以迷茫是因为:明知是脑子饿极了,却只会拼命喂肚子. 人表达的永远不是他所说的内容,而是渴望被理解的心情. 之前做了一期关于Oracle的系列,很多同学给悠悠反馈说很希望看到这样有干 ...
只需三分钟您就可以用nodejs搭建静态网页服务器（配置静态网页访问目录）
Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
搞定调度算法只需三分钟
目录 java中的线程与进程调度调度时机调度算法非抢占调度算法抢占式调度算法调度的原则调度算法先来先服务调度算法(FCFS) 短作业优先调度算法(SJF) 高响应比优先调度算法时间片轮 ...

只需三分钟！只需创建一个vuex.js文件，让你马上学会使用Vuex，尽管Vuex是个鸡肋！(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧！)

刚刚好3分钟过去了，你学会了吗？

只需三分钟！只需创建一个vuex.js文件，让你马上学会使用Vuex，尽管Vuex是个鸡肋！(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧！)相关推荐

最新文章

热门文章