使用vuex来管理数据

最近一直工作比较忙,博客已经鸽了好久了,趁着今天是周末,写点东西吧

使用vuex来管理数据

  • 最近一直在用vue做项目,但是却从来没真正去用过vuex,因为一直感觉很复杂,其实真正去研究一下啊,就会发现很容易。

vuex中,有默认的五种基本的对象:

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

怎么引用这里就不介绍了,如果使用的是3.0cli,在创建项目的时候,选择安装vuex模块,会自动配置好store.js,很方便

定义变量

  • 在store.js中,你会发现有我上面提到的那些对象,这里随便定义个变量。

和页面中在data写变量差不多。

使用变量

  • 就和正常的变量使用是一样的,只不过前面是$store
  • {{$store.state.count}}
  • 到这一步你就已经会了一小半了,很简单的吧?

回想一下,我们只需要在下载安装使用vuex,在我们定义的store.js中定义state对象,并且暴露出去。

在main.js中使用我们的store.js(这里是为了防止在各个组件中引用,因为main.js中,有我们的new Vue 实例啊!)

现在我们已经使用了vuex中的state,接下来我们如何操作这个值呢? 没错!用mutations和actions

我们继续操作store.js文件


我们在sotre.js中定义mutations对象,该对象中有两个方法,mutations里面的参数,第一个默认为state,接下来的为自定义参数。

  // 其实说白了就是通过其他页面的方法来调用这里的方法,所以这里要写对数据的操作,会直接同步到state
  mutations: {
    add(state, n) {
      state.xone = state.xone + n
    },
    remove(state, n) {
      if (state.xone > 0) {
        state.xone = state.xone - n
      } else {
        state.xone = 0
      }
    }
  },

然后我们在页面中,使用这个方法

methods: {
    add (n) {
      // 首先,通过这个向vuex传一个函数,括号内的就是函数名,传到了actions里面。这个是异步更新的
      this.$store.dispatch('addFun', n)
      // 如果要直接修改state的值可以用下面这个,但是官方不推荐,这个是同步更新的
      // this.$store.commit('add', n)
    },
    remove (n) {
      // this.$store.commit('remove', n)
      this.$store.dispatch('removeFun', n)
    }
  },
  • 当然了,这个n参数也是可以不传的,如果你需要一些计算的话,就传上

然后打开浏览器试一下吧,我们可以看到每当触发事件时,我们都可以在vue开发工具中看到我们触发的mutations方法,以及参数

完美!


接下来就是actions,actions是异步操作

创建actions对象,并且使用

actions: {
    // 调用mutations的add方法,这个addFun是从其他页面定义的方法,mutations则是接参数,这个参数对应上面的mutations,
    addFun(mutations, n) {
      // 这个commit可以理解为调用上面的某个方法
      mutations.commit('add', n)
    },
    // 调用上面的remove方法

    removeFun(mutations, n) {
      mutations.commit('remove', n)
    }
  }

getters它算是state的一个计算属性,目前还没怎么用过,以后补充

posted @ 2019-07-20 18:11  斯塔克林  阅读(821)  评论(0编辑  收藏  举报