vuex—简单介绍与示例

末蓝、 2022-12-02 10:45 150阅读 0赞

# Vuex是什么? #

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

# 为什么使用vuex？ #

new Vue({ 
      // state：驱动应用的数据源
      data () {  return { count: 0}},
        
      // view：以声明方式将 state 映射到视图
      template: ` <div>{ { count }}</div>`,
        
      // actions：响应在 view 上的状态变化。
      methods: { 
        increment () { this.count++}
      }
    })

## 单向数据流 ##

![format_png][]

当遇到**多个组件共享状态**时，多个视图依赖于同一状态，来自不同视图的行为需要变更同一状态，这时会很棘手

vuex可以满足复杂应用中多个组件进行状态共享的需求，把组件的共享状态抽取出来，以一个全局单例模式管理：

![format_png 1][]

# 使用 #

## 安装 ##

*  CDN
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vuex@2.0.0"></script>
 *  npm
    
        npm install --save vue
        npm install --save vuex
    
        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)

## 核心 ##

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

*  Vuex 的状态存储是响应式的
 *  不能直接改变 store 中的状态。唯一途径是显式地**commit mutation**

## 简单实例 ##

//仅需要提供一个初始 state 对象和一些 mutation：
    const store = new Vuex.Store({ 
      state: { 
        count: 0
      },
      mutations: { 
        increment (state) { 
          state.count++
        }
      }
    })

现在可以：

*  通过 `store.state` 来获取状态对象，
 *  通过 `store.commit` 方法触发状态变更

store.commit('increment') //提交变更
    console.log(store.state.count) // -> 1

## 组件访问vuex ##

Vuex 提供了一个从根组件向所有子组件，以 `store` 选项的方式“注入”该 store 的机制：

const store = new Vuex.Store({ 
        state: { 
            count: 0
        },
        mutations: { 
            increment (state) { 
            state.count++
            }
        }
    })
    
    var vm=new Vue({ 
        el: '#app',
        store, //注入store
        methods: { 
            increment() {  //该方法先是提交变更，接着输出状态
                this.$store.commit('increment') 
                console.log(this.$store.state.count)
            }
        }
    })

这时候父组件及其子组件都可以通过`this.$store`访问到状态及提交变更。试从组件的方法提交一个变更：

![format_png 2][]

[format_png]: /images/20221123/dc0d1256279540769bf6e9441839dc14.png
[format_png 1]: /images/20221123/efa304e5edd1485eb5df112420a1954e.png
[format_png 2]: /images/20221123/7dec3cf5891e4580a251a4ac43edbde5.png