Vuex 最简单的数量增减实例
2024-10-19 00:20:43
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单配置
在src目录下新建
|- src
|- vuex
|-store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
},
mutations: {
}
})
export default store;
在main.js
import store from './vuex/store'
/* eslint-disable no-new */
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app-box')
用vuex 最简单的操作
在vuex里面定义一个数量count变量，以及increment()增加和decrease()减少的方法
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 计算数量
count: 0
},
mutations: {
// 增加
increment (state) {
state.count ++
console.log(state.count);
},
// 减少
decrease (state) {
state.count --
console.log(state.count);
},
}
})
export default store;
页面：
<template>
<div class="main" >
<!-- 数量 -->
<!-- store.state 来获取状态对象 ，以及通过 store.commit 方法触发状态变更 -->
<div class="num">{{this.$store.state.count}}</div>
<!-- 操作 -->
<x-button type="primary" mini @click.native="increment">增加数量</x-button>
<x-button type="primary" mini @click.native="decrease">减少数量</x-button>
</div>
</template>
操作方法
/**
操作vuex里面的加法
store.commit 方法触发状态变更
我们通过提交 mutation 的方式，而非直接改变 store.state.count
是因为我们想要更明确地追踪到状态的变化
*/
increment(){
this.$store.commit('increment')
},
// 操作vuex里面的减法
decrease(){
this.$store.commit('decrease')
},
推荐几个好的vue ui库
vux库地址
iviewui库地址
饿了么库地址
其中我引入了vux框架， 这是个vue - 移动端Vue非常棒的组件库，如果大家复制代码过去，如果没有引入vux库，记得直接把< x-button>< x-button>改为< button>< /button>
最新文章
- 关于ArcGIS的Web 3D GIS问答
- 关于 HTTP 请求头的内容
- beta汇总
- html标签marquee实现走马灯效果（文字浮动）
- GridView九宫图
- 九度OJ 1516 调整数组顺序使奇数位于偶数前面 -- 归并排序
- C#☞软件设计模型_基础
- Funny Game
- webpack1.x 升级到 webpack2.x 英文文档翻译
- 一次young gc耗时过长优化过程
- 写代码中遇到的问题（php接收不到传过来的json数据，php使用utf8的用法）
- MySQL GROUP BY多个字段分组用法详解
- MAC下的mysql忘记密码该怎么办？？
- Excel中最精确的计算年龄的公式
- 用JS实现实时显示系统时间
- 基于bootstrap的datepicker
- 待解决输入istream_iterator
- 微信小程序实现滚动分页加载更多
- SSH中设置字符编码防止乱码
- 【Linux】LVM逻辑卷管理和RAID