简单的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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
DOM相关内容速查手册
2007/02/07 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
通信工程专业女生个人求职信
2013/09/21 职场文书
大学生创业事迹材料
2014/12/30 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
二十年同学聚会感言
2015/07/30 职场文书
物业公司管理制度
2015/08/05 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers