使用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的一个计算属性，目前还没怎么用过，以后补充