Vuex的环境搭建

发布时间 2023-06-06 11:06:14作者: webHYT

1、概念

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

2、何时使用

  多个组件需要共享数据时

3、搭建vuex环境

  注意:vue2中,要用vuex的3版本,vue3中,要用vuex的4版本,

(1)、安装vuex

npm i vuex@3

(2)、创建文件:src/store/index.js

// 该文件用于创建Vuex中最为核心的store

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,
})

(3)、在main.js中创建vm时传入store配置项

....
// 引入store
import store from './store/index'
....
 new Vue({
  render: h => h(App),
  store, // Vuex必须配置store
}).$mount('#app')

添加图解:

1、Actions,Mutations、State都归Store管理,actions中可以处理一些后端交互和异步请求

 2、vue 组件可以跨过actions直接和mutations交互