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对于数据的处理就像后端对数据库数据的处理一样，有增删改查，下面一一介绍：

• 增
  state是我们存储数据的地方，所以我们增加数据，没有mysql的insert，只能自己手动在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的基本使用以及实战vuex在vuejs应用程序中的使用.

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