vuex中用法值得注意的地方

什么地方用vuex:

1.全局的数据,不如用户信息,很多组件都可能用到,为了方便交互,所以用vuex

2. 变化的频率低的数据,比如网站的icon图标,轮播图,而不是消息评论等。

mutation:突变,变异。

  为什么要由mutation,是因为要对state,也就是状态的变化,进行监控。

  在组件中不能随意直接更改state,这样直接改的状态监控不到,要把改变state的所有方法固定下来,全部放到store的mutation中这是改变状态的唯一途径

mutations的参数:
  • statte:状态,
  • payload:负荷
触发方法: 用$store.commit('mutation名称',payload)

  mutations里的操作,严禁由异步代码,比如网络请求,定时器,promise,因为函数执行完就被记录,后来的异步代码执行过程不会被记录到。

actions

  专门处理异步代码的,异步中commit,然后达到改变state的目的

  因为actions是异步的,所以没法记录,只能记录mutation

  第一个参数是ctx,表示当前的store

actions触发: 用dispatch,$store.dispathc('action名称',payload),返回值是promise.

getters:

  用在computed里的,用组件中的watch监控getters里的的方法:$watch(fn: String,fn)

 created() {
    this.$watch(
      () => this.$store.getters['userLogin/getStatus'],//第一个参数是函数,监控对象是该函数的返回值
      (val) => {
        console.log(this.$route.params.topath);
        if (val !== 'isLogining') {
          const path = this.$route.query.topath || '/';
          this.$router.push(path).catch(() => {});
        }
      }
     
    );

store是可以不依赖组件就独立存在的

  比如自动登录功能,在main.js中,可以在new Vue()生成vue对象之前,就进行登录验证,

       

原文地址:https://www.cnblogs.com/dangdanghepingping/p/14869906.html