vuex 的基本使用

vuex官方教程：https://vuex.vuejs.org/zh/guide/

vuex概述

学习vue 的时候组件之间的传值太让人头疼了，有以下三种情况：

• 父向子传值：v-bind

• 子向父传值：v-on

• 兄弟之间的数据共享：

  • $on

  • $emit

以上三种情况只适合小范围的传值对于全局数据共享太麻烦了，vuex就是实现组件全局状态管理的一种机制。使用vuex与不使用vuex的情况如下：

vuex中的数据都是响应式的，在一个组件中修改了值，其他组件中的值同样被更改。

创建项目

通过vue-cli的可视化面板进行创建，需要勾选的项：

• babel

• choose vue version

• vuex

• linter / Formatter

• 使用配置文件

在选择配置文件时，选择 ESLint + Standard config

简单的计数器demo

• 清理一下通过脚手架生成项目的默认代码

• 配置一下代码格式化和eslint的校验规则

接下来生成两个组件：使计数器加一的组件、使计数器减一的组件。如下所示：

<template>
  <div>
    <button>加一</button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="css" scoped></style>

<template>
  <div>
    <button>减一</button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {}
}
</script>
<style lang="css" scoped></style>

将上述两个组件导入到app.vue根组件中，并进行组件注册：

import sub from './components/subtraction'
import add from './components/addition'

export default {
  data () {
    return {}
  },
  components: {
    'my-add': add,
    'my-sub': sub
  }
}

然后翻看官方的教程，在store.js的state对象上新增一个number属性，并初始化为0，如下代码所示：

export default new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {},
  actions: {},
  modules: {}
})

然后在mutations对象上新增一些处理事件（对number的加一减一操作）如下代码所示：

export default new Vuex.Store({
  state: {
    number: 0
  },
  mutations: {
    add (state) {
      state.number++
    },
    sub (state) {
      state.number--
    }
  },
  actions: {},
  modules: {}
})

然后分别在两个组件的按钮中设置事件调用这两个函数。

调用的方式是通过vue对象上的$store.state进行调用，如下代码所示：

methods: {
  subOne () {
    // 使number-1
    this.$store.commit('sub')
  }
}

相应的，加一组件中调用add事件。