有用过vuex吗？它主要解决的是什么问题？推荐在哪些场景用？

答: 我主要还是当全局变量来用的，比如登录人信息、token、浏览记录、跨组件的较大临时数据传递。
以往需要调个方法取全局变量或缓存，其实反而增加了初始化流程，而会自动更新的 vuex 就很好用了。

vuex的store有几个属性值？分别讲讲它们的作用是什么？

答: state:存贮公共数据的地方
Getters：获取公共数据的地方
mutations：放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行
action：放的是异步的操作 通过dispatch的方法让action里面的方法执行
context是store的一个副本

Vuex就是提供一个仓库，store仓库里面放了很多对象其中state即使数据源存放地，

页面刷新后vuex的state数据丢失怎么解决？

答:其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。
在这个Vue单页应用中，王二是用Vuex作为状态管理的，一开始王二的思路是将Vuex里的数据同步更新到localStorage里。
即：一改变vuex里的数据,便触发localStorage.setItem 方法，参考如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
function storeLocalStore (state) {
    window.localStorage.setItem("userMsg",JSON.stringify(state));
}
export default new Vuex.Store({
    state: {
        username: "王二",
        schedulename: "标题",
        scheduleid: 0,
    },
    mutations: {
        storeUsername (state,name) {
            state.username = name
            storeLocalStore (state)
        },
        storeSchedulename (state,name) {
            state.schedulename = name
            storeLocalStore (state)
        },
        storeScheduleid (state,id) {
            state.scheduleid = Number(id)
            storeLocalStore (state)
        },
    }
})

然后在页面加载时再从localStorage里将数据取回来放到vuex里，于是王二在 App.vue 的 created 钩子函数里写下了如下代码：

1
2
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
//考虑到第一次加载项目时localStorage里没有userMsg的信息，所以在前面要先做判断

以上的解决方法由于要频繁地触发 localStorage.setItem 方法，所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里，我们直接用localStorage做状态管理好了，似乎也没有必要再用vuex。
这时候王二想，如果有什么方法能够监听到页面的刷新事件，然后在那个监听方法里将Vuex里的数据储存到localStorage里，那该多好。
很幸运，还真有这样的监听事件，我们可以用 beforeunload 来达到以上目的，于是王二在 App.vue 的 created 钩子函数里写下了如下代码：

1
2
3
4
5
6
7
//在页面加载时读取localStorage里的状态信息
   localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
   
   //在页面刷新时将vuex里的信息保存到localStorage里
   window.addEventListener("beforeunload",()=>{
       localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
   })

这样的话，似乎就比较完美了。
王二在使用上述方法时，遇到了一个问题，就是：在开发阶段，如果在Vuex里添加新的字段，则新的字段不能被保存到localStorage里，于是上述代码修改如下：

1
2
3
4
5
6
7
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));

//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})

注意:存到缓存里必须用JSON.stringify方法来转换为字符串,再用JSON.parse方法来从缓存取出

请求数据是写在组件的methods中还是在vuex的action中？

如果您使用vuex的话，建议您存入vuex中，因为actions可以执行异步操作。同上，简单的页面放在methods里面即可。比较复杂，或者重要建议放在vuex中，容易维护，代码清晰,并且调用简单，这个在项目后期很重要。

vuex使用actions时不支持多参数传递怎么办？

一个Object解决所有问题

你有使用过vuex的module吗？主要是在什么场景下使用？

使用单一的状态树，应用的所有状态都会集中在一个比较大的对象上面，随着项目需求的不断增加，状态树也会变得越来越臃肿，增加了状态树维护的复杂度,而且代码变得沉长；因此我们需要modules来为我们的状态树分隔成不同的模块，每个模块拥有自己的state，getters，mutations，actions；而且允许每个module里面嵌套子module；如下：

1
2
3
4
5
6
7
8
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    ├── state.js          # 根级别的 state
    └── modules
        ├── module1.js   # 模块1的state树
        └── module2.js   # 模块2的state树