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访问到状态及提交变更。试从组件的方法提交一个变更:

posted @ 2020-09-01 14:17  sanhuamao  阅读(325)  评论(0编辑  收藏  举报