Vuex 状态管理模式

缺乏、安全感 2022-05-18 03:09 232阅读 0赞

*  Vuex 核心概念
 *  使用 Vuex
    
     *  store
     *  State
     *  Getter
     *  Mutation
     *  Action
     *  辅助函数

Vuex是什么

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

*  Vuex 的状态是响应式的，若 store 中的状态发生变化，那么调用 状态 的组件也会更新
 *  store 中的状态不能直接改变，  
    只能通过显示的提交 mutations (`store.commit`、`store.dispatch`)来改变状态，  
    使得我们可以方便地跟踪每一个状态的变化。

# Vuex 核心概念 #

![这里写图片描述][20180729114834602]

# 使用 Vuex #

*  安装 vuex 模块

npm install vuex --save

*  `main.js`：

import store from './store'
    
    // 将状态从根组件 '注入' ，让子组件能通过 this.$store 访问
    new Vue({
      store,
      render: h => h(App)
    }).$mount('#app')

*  `store.js`：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    // 作为插件使用
    Vue.use(Vuex)
    
    // 定义容器, 并作为模块导出
    export default new Vuex.Store({
    
        // 状态：store.state
        state: {
            token: '',
        },
    
        // 计算状态：store.getters
        getters: {
            loginStatus: state => {
                return state.token
            },
        },
    
        // 更改状态：store.commit()
        mutations: {
            setToken (state, value) {
                state.token = value
                localStorage.setItem('TOKEN', value)
            }
        }
    
        // 更改状态(异步)：store.dispatch()
        mutations: {
            setToken (state, value) {
                state.token = value
                localStorage.setItem('TOKEN', value)
            }
        }
    })

## store ##

类似容器，包含应用的大部分状态

<span>{
       { store.state.activePage }}</span>

// 组件中调用
    export default {
        created () {
            this.store.state.activePage
            this.store.commit('activePage', 'home')
        }
    }

## State ##

Vuex 使用单一状态树，这可以让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。需要注意，单状态树和模块化并不冲突！

由于 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可

computed: {
      count () {
        return store.state.count // this.$store.state.count
      }
    }

## Getter ##

`Getter(state, getters)` 可以从 store 中的 state 中派生出一些状态（过滤、计数），类似于计算属性  
`getter` 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

> 完整请参照 [https://vuex.vuejs.org/zh-cn/getters.html][https_vuex.vuejs.org_zh-cn_getters.html]\\

## Mutation ##

`mutation` 必须是同步函数，且需遵守 Vue 的响应规则

*    
    
 *  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation  
    
    
     *  类似于事件：事件类型 (type) 和 一个 回调函数 (handler)
     *  调用 `store.commit(type, payload)` 方法来触发mutations中的相关方法。
 *  最好提前在你的 store 中初始化好所有所需属性
 *  当需要在对象上添加新属性时，  
    
    
     *  使用 `Vue.set(obj, 'newProp', 123)`
     *  或者以新对象替换老对象：`state.obj = { ...state.obj, newProp: 123 }`

> 完整请参照： [https://vuex.vuejs.org/zh-cn/mutations.html][https_vuex.vuejs.org_zh-cn_mutations.html]

## Action ##

Action 类似于 mutation，不同在于：

*  Action 提交的是 mutation，而不是直接变更状态。
 *  Action 可以包含任意异步操作。
 *  通过 store.dispatch 方法触发

`store.dispatch` 可以处理被触发的 action 的处理函数返回的 Promise，并且 `store.dispatch` 仍旧返回 Promise。

actions: {
        actionA ({ commit }) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('someMutation')
                    resolve()
                }, 1000)
            })
        }
    }

现在你可以：

store.dispatch('actionA').then(() => {
      // ...
    })

在另外一个 action 中也可以：

// 假设 getData() 和 getOtherData() 返回的是 Promise
    actions: {
      async actionA ({ commit }) {
        commit('gotData', await getData())
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成
        commit('gotOtherData', await getOtherData())
      }
    }

> 完整请参照：[https://vuex.vuejs.org/zh-cn/actions.html][https_vuex.vuejs.org_zh-cn_actions.html]

## 辅助函数 ##

*  当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。  
    为了解决这个问题，我们可以使用 `mapState` 辅助函数帮助我们生成计算属性。

// 使用 ES6 的解构赋值导入
    import { mapState } from 'vuex'
    
    export default {
        created () {
            console.log(this.activePage)
            this.setActivePage('home')
        }，
        computed: {
            ...mapState({
                // 使用对象展开运算符将此对象混入到外部对象中
            })
        }
        computed: mapState(
    
            // 映射 this.token 为 store.state.token
            'token',
            // 映射多个状态
            ['token', 'count'],
    
            // 箭头函数可使代码更简练
            token: state => state.token,
    
            // 传字符串参数 'token' 等同于 `state => state.token`
            tokenAlias: 'token',
    
            // 为了能够使用 `this` 获取局部状态，必须使用常规函数
            tokenPlus (state) {
                return `Bearer ${state.token}`
            }
        )
    }

> 参考博客  
> [https://blog.csdn.net/ligang2585116/article/details/78964349][https_blog.csdn.net_ligang2585116_article_details_78964349]

[20180729114834602]: /images/20220518/518b1a9b062a4b049a3ddf0d3148c7dc.png
[https_vuex.vuejs.org_zh-cn_getters.html]: https://vuex.vuejs.org/zh-cn/getters.html
[https_vuex.vuejs.org_zh-cn_mutations.html]: https://vuex.vuejs.org/zh-cn/mutations.html
[https_vuex.vuejs.org_zh-cn_actions.html]: https://vuex.vuejs.org/zh-cn/actions.html
[https_blog.csdn.net_ligang2585116_article_details_78964349]: https://blog.csdn.net/ligang2585116/article/details/78964349