Vuex详细介绍

大家好这里是社会你戈 这是我第一次写博客相信不是最后一次 我会为大家带来关于前端工程师面试题的一些解读 大家就看我表演就好了 话不多说再见了您内~

嘻嘻 开始

VUEX是什么？

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。

配置VUEX

1、利用npm下载vuex包，在命令行工具中输入以下命令,cd到你的项目目录

npm install vuex --save

2. 在src下新建一个名叫store的文件夹，用App.js同级，并在文件夹下新建store.js文件。因为store.js是基于vue的，所以需要引入vue和vuex

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex);

这样子我们的VUEX就已经配置好了 大家可以小试牛刀啦

VUEX滴概念

1.state
仓库 你可以把它看做成我们data(){return{}}里面的东西 可以写变量 使用也非常简单 比如说我们在state里面定义了一个n：10 我们只需要在我们组件中通过$store.state.n来使用 如图



这样子就行了 是不是很简单啊童鞋们

2.Mutations
同步操作 提交更新数据的方法 每个mutations都有一个字符串的事件类型,和一个回调函数 回调函数就是我们实际进行状态更改的地方 并且它会接受两个参数
我们上面已经在 state里面写了一个 n:10 童鞋们都记得把 那么我们就在这里面写一个方法来改变这个10
首先我们在mutations里面写一个方法 如下图

我们传进了两个参数 首先是state 还有一个val 这个val就是你的值 这个值我们在哪里定义呢?请看下图

我们刚在页面上显示了state中的数据 那么就写一个button 绑定一个点击事件 然后在点击事件里面写 this.$store.commit(“mutations中的方法”,val值)
这样子我们页面上的10 就会加119 变成129是不是很神奇呢?

3.getters
getters是一个计算属性,getters属性的值为一个对象，对象中每个属性对应一个getter，每个getter的值为一个函数，函数返回值可以为新的状态或一个函数。

4.action
Action与mutation基本相同，区别在以下两个方面：
1.Action是通过提交mutation来改变state，而不是直接改变state
2.Action可以执行异步操作，而mutation只能为同步操作

5.Module
由于只使用一个store对象来管理state，如果是一个庞大的应用，那么store会是一个比较大的对象，显得臃肿，不利于维护。
Vuex提供了Module(模块)，可以将store拆分为不同的模块。
如何拆分呢?
首先我们在你vuex的同级再创建一个js文件 我这里命名为per
然后我们在per里面写一个 export default{} 在{}里我们可以写state:{},Mutations:{}等
这就是我们第二个vuex
创建完成之后我们在第一个vuex里面引入这个东西
然后在modules:{}里面直接写per就行 因为名字一样隐藏后缀 就这样我们就有了第二个仓库

6.plugins
数据持久化和浏览器的local storage(本地存储)类型

今天的课程到此为止 童鞋们再见啦 😘``