vue 后台管理 之 状态管理 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)