Vuex的简单使用--累加器

简介

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

安装

在项目根目录执行如下命令来安装 Vuex依赖包

npm install vuex --save

创建 store.js 文件，导入 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//实例化一个Vuex.Store的实例
const store = new Vuex.Store({
// 全局 state 对象，用于保存所有组件的公共数据
    state:{
        count：0
    },
// 定义改变 state 初始值的方法，这里是唯一可以改变 state 的地方，缺点是只能同步执行
    mutations:{
        //add函数
        add(state,step){
            state.count+=step
        }
    }
})

//将Vuex.Store暴露出去
export default store

在main.js文件中，导入store实例对象使用

import Vue from 'vue'
import App from './App'
import store from './store'

//创建Vue实例
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

使用

创建加减计数器组件Add.vue

注意：只能通过mutations变更Store中的全局数据，不可以通过调用this.$store.state.count的方式直接改变数据

<template>
  <div>
    <h3>当前最新的count值为：{{this.$store.state.count}}</h3>
    <button @click="addHandler">+N</button>
  </div>
</template>

<script>
export default {
  name: 'Add',
  data() {
      return {
            step:5
        }
    },
  methods: {
        addHandler() {
             // 调用mutations中的add方法
            this.$store.commit("add",this.step)
        }
    }
}
</script>
<style>
</style>

在App.vue中，引入Add.vue组件

<template>
  <div id="app">
    <my-add></my-add>
  </div>
</template>

<script>
import Add from '@/components/Add'
export default {
  name: 'App',
  components: {
    "my-add": Add
  }
}
</script>
<style>
</style>

模块化

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 ，可参考vue-element-admin中的结构