为了账号安全,请及时绑定邮箱和手机立即绑定

vuex入门

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

简单来说,vuex是给vuejs应用程序做前端数据状态管理的,意在解决复杂的前端应用的拥有大量的状态数据,且分布在不同的组件中,带有复杂的业务场景,
举个例子:就比如我们有个类似慕课网的在线知识学习系统,那么肯定涉及用户类,那么用户的个人数据可能比较复杂,拥有表示会员信息的数据,我们可能在多个页面都需要使用它或者修改它,如果写在组件里面,通过向后端不断请求来更新,这样会导致请求量过大,带来不必要的资源浪费,还会带来后期维护起来不方便,要是能集中放在一点地方管理这些数据,是不是就方便多了,

安装vuex

3.0的vue-cli是不自带vuex的,所以需要我们自己安装vuex包,
步骤:

  • 第一步:安装vuex
npm install vuex
  • 第二步:实例化vuex的核心仓库store
    新建一个store.js
// store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
	    count: 0
    }
})

export default store
  • 第三步:main.js中引入,并加入vue的初始化中
// main.js
import store from "./store"
// 添加store
new Vue({
    store,
    router,
    render: h => h(App)
}).$mount("#app")

这样安装就好了。

核心图

vuex核心

使用

vuex对于数据的处理就像后端对数据库数据的处理一样,有增删改查,下面一一介绍:


  • state是我们存储数据的地方,所以我们增加数据,没有mysqlinsert,只能自己手动在state中添加我们想增加的数据

  • 同样的vuex也没有提供物理删除数据的方法,但是我们可以通过实现理论删除,具体操作就是改变state的数据为null或者空

  • 对于state数据的修改,vuex提供了commit方法调用mutation来进行数据的修改操作,并且commit调用的mutation是唯一修改数据的方法
// 实现方式
store.commit('updateCount', 1)

store是我们初始化的实例,updateCount是我们自定义的mutation,1是我们传入的变量(详细的介绍可以看我的课程)

-
理论上的查询就是直接获取store实例对象,然后拿到state字段的所有数据,这也是我们基本的查数据方式,但是呢vuex添加了其他的方式来获取数据,为了更便捷好好理解吧,方式有通过getter获取state数据,mapState获取state数据

这里是对vuex的简单介绍,我的课程vuex入门会详细点介绍vuex的基本使用以及实战vuexvuejs应用程序中的使用.

课程的实战类容是实现一个简单视屏课程学习的系统,包括购买会员,分享功能等,数据都是前端mock,旨在提供思路

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
119
获赞与收藏
40

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消