vue 后台管理 之 状态管理 vuex 的使用
幸福是一种能力
文章目录
- 一、数据驱动视图
- 二、VueX 数据公共池
一、数据驱动视图
- 我们都知道 vue 之所以好用，是因为官方帮我们做了数据驱动视图
- 初始化时将数据和视图进行绑定，通过 watcher 来监听数据的变化，当数据变化时，会触发响应的更新函数，从而更新视图
但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态
二、VueX 数据公共池
- 我很喜欢用一个词来形容 vuex ，‘数据公共池’，非常生动形象，简易来说就是 “ 共享 ”
1. 安装
npm install vuex@next --save
2. 定义
import { createStore } from 'vuex' // 引入vuex库// 创建一个新的 store 实例
const store = createStore({state() {return {}},mutations: {},actions:{}
})export default store// main.js 里引入挂载
import store from './store' // 记得修改路径
const app = createApp(App)
app.use(store)3. 使用
- 这是一个简易版的 js 文件
- Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
import { createStore } from 'vuex'
import { getinfo } from '~/api/manager'
const store = createStore({state() {return {// 用于存储用户信息user: {},}},// 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) // mutation 这样使得我们可以方便地跟踪每一个状态的变化，// 从而让我们能够实现一些工具帮助我们更好地了解我们的应用。mutations: {// 记录用户信息SET_USERINFO(state,user){state.user = user},},actions:{// 获取当前登录用户信息getinfo({ commit }){return new Promise((resolve,reject)=>{getinfo().then(res=>{// 通过使用 commit 方法调用修改user commit("SET_USERINFO",res)resolve(res)}).catch(err=>reject(err))})},}
})export default store
- 现在，你可以通过 store.state 来获取状态对象，并通过 store.commit 方法触发状态变更
$store.commit('increment')console.log($store.state.count)