幸福是一种能力

---

一、数据驱动视图

• 我们都知道 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)