编辑
2023-04-12
Vuex-Version3
0
请注意,本文编写于 463 天前,最后修改于 420 天前,其中某些信息可能已经过时。

目录

vuex
vuex概念
特点
安装vuex
命令
安装成功
存放位置
store
说明
Vuex和单纯的全局对象的不同点
store/index.js基础文件解析
默认配置
导入模块
注册模块
配置与导出

vuex

vuex概念

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

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

特点

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

安装vuex

命令

npm install vuex

安装成功

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

存放位置

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

store

说明

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

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

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

store/index.js基础文件解析

默认配置

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

导入模块

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

注册模块

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

Vue.use(Vuex)

同时在main.js中引入,根实例中注册
register_in_main-js

配置与导出

写法一

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

写法二

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

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!