为什么使用vuex????
在vue开发中,每个组件都有自己独立的数据,整个项目中的所有组件可以通过总线传值,但是如果出现几个组件需要共用同一组数据时,数据管理就会非常麻烦。
vuex简介
vuex是vue的状态 (数据) 管理工具。它采用了一种集中管理数据的思想,将整个项目中所有的公共数据放在一个统一的仓库中。然后所有组件都可以从这个仓库中读取数据,也可以通过仓库提供的方法修改数据。
vuex的五个属性和基本用法
state, getters, mutations, actions, modules。
- state:vuex的基本数据,用来存储变量
- getters:从基本数据(state)派生的数据,相当于state的计算属性
- mutations:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutations 都有一个字符串的 事件类型
(type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方,并且它会接受 state
作为第一个参数,提交载荷作为第二个参数。 - actions:和mutation的功能大致相同,不同之处在于 ==》
>>. Action 提交的是 mutation,而不是直接变更状态。
>>. Action 可以包含任意异步操作。 - 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>
- npm安装
npm install vuex --save
- yarn安装
yarn add vuex
main.js导入
import store from "./store.js";
//导入后在根组件注入
new Vue({
router,
render: h => h(App),
// 在根组件中注入仓库对象
store
}).$mount('#app')