[Vue的面试题]Vuex的使用，属性和持久化存储

1 创建和挂载Vuex

首先我们得安装Vuex插件然后在store文件夹里面创建一个index.js文件(如果没有store文件则说明生成的时候未勾上Vuex选项，则需要手动创建store文件夹)

2 Vuex的属性

state：全局共享属性

用法1 ： this.$store.state.xxx

下面例子共享是属性为str，所以如果组件需要用的话，则是this.$store.state.str

如果是渲染到页面上的话，其中的this可以省略，可以写为{{$store.state.str}}

组件内部则可以直接使用了

结果如下

用法2 使用辅助函数 mapState

用法则是在需要用的数据的组件里面从Vuex引入mapState 函数

接着我们需要使用到计算方法computed和扩展运算符

这样str的数据则可以直接用{{str}}在页面上面渲染出来了

运行结果

以上两种方法都可以拿到state中的值，但它们是有所区别的

使用this.$store.state.xxx 所拿到的值是可以直接修改Vuex的state的数据的

但使用辅助函数mapState 则是无法直接修改Vuex的state的数据的

原因是 第一种方法是直接从Vuex中取到的数据，而第二中方法则是mapState从Vuex中取到了数据，然后把数据复制一份，再传给组件的

简单来说：第一种方法是可读写的 第二种方法是只读的

getters: 针对state数据进行二次计算

可以再getter里面编写对于state计算的函数

用法1 ： this.$store.getters.xxx

上面举例用的方法是changeStr，所以在组件中使用的方式是this.$store.getters.changeStr

同理如果渲染到页面上的话，this是可以省略的，如果在数据中使用this是需要带上的

运行的结果

用法2 使用辅助函数 mapGetters

和上面mapState的用法类似

引入和使用计算方法和扩展运算符

在页面中使用的方法也一样

运行结果

tip: 值得一提的是，这两种用法得到的数据都是不可以改变的，也就是取到的数据都是只读的，一旦强行去改变数据，则会发生报错，如使用双向绑定v-model

mutations：可以用来存放同步方法

先写出同步方法

然后到组件内部引入和使用

运行结果

tip:mutations中的方法，return的值是得不到的

actions：可以用来存放异步方法

先写出异步方法

然后到组件内部引入和使用

运行结果

值得一提：

相同点：mutations和actions都是来存放全局方法的，这个全局方法return的值拿不到

区别：

mutations ==》 同步

actions ==》 返回的是一个Promise对象，他可以执行相关异步操作

mutations是来修改state的值的，actions的作用是来提交mutations

（提交方法如下）

这个例子就是把前面数据自家延迟实现，同时又能修改到state里面的数据

如果将setTimeout放在mutations里面，则state里面原本的数据不会发生变化,只会将渲染的出来的数据进行自加

module： 把Vuex在此进行模块之间的划分

可以把Vuex内部的state的数据分得更加详细，便于更好地管理数据

首先我们可以先划分一个数据的模块，比如用户数据 user

然后我们新建一个modules目录，然后再在里面创建一个user.js文件

然后我们就可以在里面创建出数据

接着我们再到store里面导入和module里面挂载

然后我们就可以直接在组件里面使用了

用法1：this.$store.XXX.xxx

XXX表示挂载的大的分类的数据变量名称，xxx表示打的分类里面详细的数据

运行结果

用法2 使用辅助函数 mapState

和state里面类似

运行结果

3 Vuex的持久化存储

1. 用localStorage来记录，然后当页面刷新的时候再读取

2. 用插件，本质上还是使用localStorage来记录，只不过是把内容打包集合了