Vuex的使用方法

目录

一、概念

二、何时使用

三、搭建vuex环境

四、基本使用

五.getters的使用

六、四个map方法的使用

七、模块化+命名空间

---

一、概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

 

二、何时使用

多个组件需要共享数据时

三、搭建vuex环境

1.创建文件：src/store/index.js(在src里面新建一个store文件夹，然后再里面新建一个index.js文件)

安装依赖包：npm i vuex@3(vue2 安装vuex3，vue3 安装vuex4)

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

2. 在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

四、基本使用

1.初始化数据、配置actions、配置mutations，操作文件store.js

//引入Vue核心库
import Vue from 'vue'
//引入