vuex简单介绍与示例

Vuex是什么?

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

为什么使用vuex？

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

单向数据流

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

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

使用

安装

• 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

简单实例

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0"></script>

//仅需要提供一个初始 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访问到状态及提交变更。试从组件的方法提交一个变更：