vue状态管理(vuex的简介和五个属性)

为什么使用vuex？？？？

在vue开发中，每个组件都有自己独立的数据，整个项目中的所有组件可以通过总线传值，但是如果出现几个组件需要共用同一组数据时，数据管理就会非常麻烦。

vuex简介

vuex是vue的状态 (数据) 管理工具。它采用了一种集中管理数据的思想，将整个项目中所有的公共数据放在一个统一的仓库中。然后所有组件都可以从这个仓库中读取数据，也可以通过仓库提供的方法修改数据。

vuex的五个属性和基本用法

state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量
2. getters：从基本数据(state)派生的数据，相当于state的计算属性
3. mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutations 都有一个字符串的 事件类型
   (type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方，并且它会接受 state
   作为第一个参数，提交载荷作为第二个参数。
4. actions：和mutation的功能大致相同，不同之处在于 ==》
   >>. Action 提交的是 mutation，而不是直接变更状态。
   >>. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

使用下面这两种方法存储数据：

dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

vuex安装

在网上看到的三种安装方式，我只用过npm安装

• 在 Vue 之后引入 vuex 会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

1. npm安装

npm install vuex --save

1. yarn安装

yarn add vuex

main.js导入

import store from "./store.js";
//导入后在根组件注入
new Vue({
  router,
  render: h => h(App),
  // 在根组件中注入仓库对象
  store
}).$mount('#app')