vuex

vuex概念

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

简单理解为： 专门用于复杂组件间数据传递、管理

特点

• 响应式，即组件更改数据后，其它组件使用此数据会自动更新
• 变化有迹可循

安装vuex

命令

npm install vuex

安装成功

则package.js中会显示对应版本

存放位置

src下创建sotre文件，store中建立index.js文件

store

说明

每一个 Vuex 应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着应用中大部分的状态 (state)

Vuex和单纯的全局对象的不同点

• Vuex的状态存储是响应式的，当组件更改store中的状态后，则相应组件也会发生改变
• 无法直接改变 store 中的状态。改变store 中的状态的唯一途径就是显式地提交 (commit) mutation，从而方便追踪每一个状态的变化

store/index.js基础文件解析

默认配置

使用脚手架创建项目时自动会有以下配置

导入模块

import Vue from 'vue'
import Vuex from 'vuex'

注册模块

外部安装的组件(为vue定制、配套的)都需要Vue.use()注册

Vue.use(Vuex)

同时在main.js中引入，根实例中注册

配置与导出

写法一

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

写法二

var store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

export default store