Vuex

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• 安装：npm install vuex --save
• 此处的状态即：数据（data中的属性）
• 特点：集中式
• vuex中 store 就是数据（state）存储的容器
• 注意：
  • 通过 store.count 来获取仓库中的数据（状态）
  • 必须通过 mutations 中提供的方法来修改数据（状态）

当一个大型项目功能变得越来越复杂，项目中的组件越来越多
此时，各个组件之间都可能存在相互通讯的问题，如果不处理，那么各个组件之间就会相互传递数据
导致的结果就是，我们项目中的数据就不可预测了。也就是：各个组件相互影响，不知道是哪一个组件
在什么情况下修改数据

散乱的组件.jpg 用vuex来管理组件让它们集中起来.jpg

1.创建store/index.js

// 1 导入 vue
import Vue from 'vue'
// 2 导入 vuex
import Vuex from 'vuex'
// 安装 vuex 插件
Vue.use(Vuex)

const store = new Vuex.Store({
  // 数据（状态）
  // 读取数据：store.state.count
  state: {
    count: 10
  },

  // 用来操作数据的方法
  // 修改数据：store.commit('addCount', 参数)
  mutations: {
    addCount(state, arg) {
      // 参数：state表示 上面的 state对象
      // 实现 count +1
      // state.count++
      state.count += arg.count
      console.log(arg.abc);
      console.log('这是通过 mutations 中的addCount 方法修改了count值');
    }
  }
})

export default store

2.在 Vue 实例中通过 store 将 vuex 与实例挂到一起

// 导入 vuex
import store from '../store'

// 3 将Vue实例与 App 挂到一起
const vm = new Vue({
  el: '#app',
  router,
  // 将 vuex 与实例挂到一起
  store,
  render: c => c(App)
})

3.调用 store 中的数据

<script>
 /* // 测试 vuex
    fn() {
      // 调用 store 中的方法
      this.$store.commit('addCount', { count: 2, abc: 'aaa' })
    }, */
</script>

4.展示 store 中的数据

<template>
   测试：
              展示 store 中的数据
              <mt-button type="danger" @click="fn">测试vuex</mt-button>
              {{ $store.state.count }}
</template>