简单的vuex 的使用案例笔记


Posted in Javascript onApril 13, 2018

1、 npm install vuex

2、 在src 下 新建文件夹 store (为什么是这个单词,vuex 是用来状态管理的,用储存一些组件的状态,取存贮,仓库之意),store 文件下 新建文件 index.js  (为什么是index.js? 在导入的时候,会第一选择这个叫index的文件)

3、 index.js import 导入 vue 和vuex (import 是es6 的语法, es5 是 require), 代码如下:

  这里的demo 是一个 改变 app 的模式 的一个appellation ,选择是 夜间模式还是白天模式

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 night: true,
 text: '白天',
 className: 'morning'
 },
 mutations: {
 increment (state) {
  state.night = !state.night;
  state.text = state.night === true ? '晚上' : '白天';
  state.className = state.night === true ? 'night' : 'morning';
 }
 }
})

4、 main.js import 这个index.js 代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' // 会找index.js 

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 注入根组件,其他子组件 都可以引用
 template: '<App/>',
 components: { App }
})

5、使用vuex 的状态

组件1:

dom :

<div class="header" :class="model">

js

computed: {
 model() {
  return this.$store.state.className // 是ninght 还是 morning
 }
 },

注意:

:class="model" 这个class 可以绑定一个方法传参数,可以直接用 js 表达式,可以绑定一个计算属性

组件2:

dom:

<div class='modal' @click="changeModel">
 <div class="avatar">
 <img src="../../assets/img/logo.png" width="18" height="18">
 </div>
 <div class="name">
 {{currentModel}}
 </div> 
 <!-- vuex 相当于全局注入 vuex 然后取这里面的值 -->
</div>

js:

computed: {
 currentModel () {
  return this.$store.state.text
 }
 },
 methods: {
 changeModel () {
  // document.body.className='night'
  this.$store.commit('increment')
 }
 }

注意:

js 中的 currentModel 和 dom 中的 {{ currentModel }} 是一个,和 :class 可以跟表达方法一样 ,可以跟变量 ,表达方法 ,表达式 ( 这里灵活的模版方法,回头查看下源码,然后补充这的说明, vue模版为何如此强大!)

点击事件,触发方法 changeModel ,changeModel 触发 mutation 的方法,显示改变 值 ,这个是固定的语法, this.$store.commit('increment');

increment 可以在定义的时候,设置参数,传参数, this.$store.commit('increment', 'argumnet') , 在 mutation 里面  increment (state , arg) { .. = arg; ....};

截图如下:

简单的vuex 的使用案例笔记

默认方式:

如上图显示。默认的是,白天的模式,className 是 morning;

  点击事件触发模式;

简单的vuex 的使用案例笔记

再次点击的时候,可以在改回来,这个窍门,就是 index.js 里面,increment 对 night 的变量 取 对 的一个逻辑方法。跟jq 里面的 toggle,类似

简单的vuex 的使用案例笔记

结束语:

简单的vuex 的案例 ,做个笔记。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
用js实现博客打赏功能
Oct 24 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
深入理解Vue 单向数据流的原理
Nov 09 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
You might like
ThinkPHP之getField详解
2014/06/20 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
VBScript版代码高亮
2006/06/26 Javascript
List the UTC Time on a Computer
2007/06/11 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
2019/01/09 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Django中多种重定向方法使用详解
2019/07/17 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
社区母亲节活动方案
2014/03/05 职场文书
敬老院活动总结
2014/04/28 职场文书
大学生实习证明范本
2014/09/19 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Redis全局ID生成器的实现
2022/06/05 Redis