vuex重点笔记

向右看齐 2022-04-12 13:10 239阅读 0赞

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

这个状态自管理应用包含以下几个部分：

*  **state**，驱动应用的数据源；
 *  **view**，以声明方式将 **state** 映射到视图；
 *  **actions**，响应在 **view** 上的用户输入导致的状态变化。

但是，当我们的应用遇到**多个组件共享状态**时，单向数据流的简洁性很容易被破坏：

*  多个视图依赖于同一状态。
 *  来自不同视图的行为需要变更同一状态。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70][]

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的**状态 (state)**。Vuex 和单纯的全局对象有以下两点不同：

1.  **Vuex 的状态存储是响应式的**。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.  你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地**提交 (commit) mutation**。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

创建一个 store：

// store/index.js
    
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    // Vuex 模块引入
    import count from '@/store/modules/count'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      modules: {
        count
      }
    })

// store/modules/count.js
    
    const state = {
        count: 0
    }
    
    const getters = {
        getCount: count=> state.count
    }
    
    const mutations = {
        increment (state, data) {
          state.count += data
        }
    }
    
    const actions = {
        handleCount:({commit}) => {
          commit('increment', data)
        }
    }
    
    export default {state, getters, mutations, actions}

官方详解：

[https://vuex.vuejs.org/zh/guide/state.html][https_vuex.vuejs.org_zh_guide_state.html]

[https://vuex.vuejs.org/zh/guide/getters.html][https_vuex.vuejs.org_zh_guide_getters.html]

[https://vuex.vuejs.org/zh/guide/mutations.html][https_vuex.vuejs.org_zh_guide_mutations.html]

[https://vuex.vuejs.org/zh/guide/actions.html][https_vuex.vuejs.org_zh_guide_actions.html]

[https://vuex.vuejs.org/zh/guide/modules.html][https_vuex.vuejs.org_zh_guide_modules.html]

你可以通过 store.state 来获取状态对象，以及通过 store.commit 或store.dispatch方法触发状态变更：

// commit方式
    store.commit('increment')
    // dispatch方式（一般处理异步）
    store.dispatch('handleCount')

vue文件获取state及改变：

computed: {
        ...mapGetters({
            count: 'getCount'
        })
    },

<template>
        计数：{
       {count}}
    </template>
    
    <script>
        import { mapGetters } from 'vuex'
           
        export default {
            name: 'com-header',
            computed: {
              ...mapGetters({
                count: 'getCount'
              })
            },
            props: '',
            components: {},
            data() {
              return {
                data: []
              }
            },
            mounted() {
    
            },
            methods: {
                changeCount() {
                    // commit方式
                    this.$store.commit('count', 1)
                    // dispatch方式（多用于异步）
                    this.$store.dispatch('handleCount', 1)
                }
            }
        }
    </script>

vue全局配置：

// webpack 构建
    new Vue({
      router,
      store, // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
      render: h => h(App)
    }).$mount('#app')
    
    
    // 单独页面
    const app = new Vue({
      el: '#app',
      store, // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
      components: { Counter },
      template: `
        <div class="app">
          <counter></counter>
        </div>
      `
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70]: /images/20220412/15e45c145bdc4c4e98129e1484a36ad7.png
[https_vuex.vuejs.org_zh_guide_state.html]: https://vuex.vuejs.org/zh/guide/state.html
[https_vuex.vuejs.org_zh_guide_getters.html]: https://vuex.vuejs.org/zh/guide/getters.html
[https_vuex.vuejs.org_zh_guide_mutations.html]: https://vuex.vuejs.org/zh/guide/mutations.html
[https_vuex.vuejs.org_zh_guide_actions.html]: https://vuex.vuejs.org/zh/guide/actions.html
[https_vuex.vuejs.org_zh_guide_modules.html]: https://vuex.vuejs.org/zh/guide/modules.html