Vuex笔记-Vuex的安装与导入

---

前言

Vuex笔记-Vuex的安装与导入

---

一、安装流程

1.安装vuex

npm install vuex --save

以learn_vuex项目为例

2.导入vuex

在/src下新建文件夹store，在store文件夹下新建index.js

修改/store/index.js代码如下：

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

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
})

// 3.导出store对象
export default store

修改/src/main.js代码如下：

import Vue from 'vue'
import App from './App.vue'
import store from "@/store";

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

导入完成

二、测试是否安装成功

1.修改$store.state

/store/index.js的代码修改如下：

const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {},
})

2.修改App.vue

/src/App.vue代码如下：

<template>
  <div>
    <h2>counter = {{$store.state.counter}}</h2>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
</style>

3.运行程序查看结果

npm run serve

运行结果：

vue devtools运行结果：

---

总结

Vuex笔记-Vuex的安装与导入