Vuex基础应用

官方文档中描述 “Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式”，重点讲解 state、getters、mutations、actions 等核心概念，最终实现数据共享，本节实现在 Vue 项目中配置 Vuex，步骤如下。

（1）安装 Vuex，打开终端，在终端中执行以下命令。

npm install vuex -S

（2）引用 Vuex，打开 main.js，在 main.js 中引用 Vuex，代码如下。

import Vuex from 'vuex'
Vue.use(Vuex)

（3）创建 Vuex 实例对象，成功引用 Vuex 之后，就可以像 Vue 一样创建实例对象了，代码如下。

new Vue({
  el: '#app',
  router,
  store, //将Vuex实例挂载到Vue对象
  components: { App },
  template: '<App/>'
})

代码解析如下。

配置对象中的 state 相当于 Vue 中的 data 属性，用来存放数据。

（4）将 Vuex 实例对象挂载到 Vue 实例中，代码如下。

<div class="hello">
   <h1>{{$store.state.num}}</h1>
</div>

挂载到 Vue 实例之后，Vue 中的所有组件都可以使用 Vuex 中的值，例如当前在 Vuex 中定义了 num 属性，若要在 HelloWorld 组件中使用 num 属性，代码如下。

HelloWorld 组件代码如下。

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

Vue.use(Vuex);

var store = new Vuex.Store({
  state: {
    // 相当于 Vue 中的 data
    num: 10
  }
});

export default store;

语法是使用插值表达式及 $store.state.公共数据，运行代码，在 HelloWorld 组件中可以拿到 Vuex 中定义的属性，这是 Vuex 的基本用法。

为了方便后期维护 Vuex 代码，下面讲解 Vuex 代码分离。在 src 目录下新建 store 文件夹，在 store 文件夹下新建 index.js，代码如下。

var store = new Vuex.Store({
  state: {
    // 相当于 Vue 中的 data
    num: 10
  }
})

代码解析如下。

  • Vuex 是依赖 Vue 的，需要先引入 Vue。

  • 要遵循 common.js 规范，使用 export default 导出 store 模块。

最后只需要在 main.js 中引用模块即可，代码如下。

import store from './store'