简单的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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php函数连续调用实例分析
2015/07/30 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
深入研究React中setState源码
2017/11/17 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
webpack-dev-server远程访问配置方法
2018/02/22 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
聊聊Python中的pypy
2018/01/12 Python
python中几种自动微分库解析
2019/08/29 Python
python中JWT用户认证的实现
2020/05/18 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
python实现图片素描效果
2020/09/26 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
小学模范班主任事迹材料
2014/05/13 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
酒店员工手册范本
2015/05/14 职场文书
2016年少先队活动总结
2016/04/06 职场文书
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers