简单的vuex 的使用案例笔记
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; ....};
截图如下:
默认方式:
如上图显示。默认的是,白天的模式,className 是 morning;
点击事件触发模式;
再次点击的时候,可以在改回来,这个窍门,就是 index.js 里面,increment 对 night 的变量 取 对 的一个逻辑方法。跟jq 里面的 toggle,类似
结束语:
简单的vuex 的案例 ,做个笔记。希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 【Android笔记 三】Location获取地理位置信息(中)Criteria类的简单使用
- Silverlight学习笔记一(理解一下机制,使用一下布局,实现一个简单的用户登录)
- Flex权威指南3学习笔记之二------简单控件的使用
- Webservice学习笔记二,使用Axis发布简单的Web服务
- {传智播客} (学习笔记)--通过一些简单案例,了解Oracle存储过程编写和调用
- 学习笔记,VB.NET使用DirectSound9 (1) 简单播放
- entlib5.0 学习笔记 caching application block2 简单使用示例
- ERwin简单使用笔记
- 使用Antlr+Stringtemplate生成method chaining,一个不太简单的案例(1)
- TransactionScope 分布式事务的使用案例 以及简单说明
- APIDemo学习笔记——Android上几种简单的Animation使用方法(二)
- JSON的使用及简单案例
- 卡巴斯基写的一本书《代码优化-高效使用内存》超简单笔记
- Unity 学习笔记(1) -- Unity简介及简单使用
- (学习笔记)简单正则表达式的使用实例[javascript]
- APIDemo学习笔记——Android上几种简单的Animation使用方法(三)——3D Transition