vuex

最新推荐文章于 2024-09-20 22:35:21 发布

nohero1

最新推荐文章于 2024-09-20 22:35:21 发布

阅读量189

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/nohero1/article/details/106425680

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文档介绍了Vuex的基础知识，包括安装步骤和在Vue项目中的应用。通过学习，你可以掌握如何在src中创建store/index.js文件，在main.js中引入Vuex，并在HelloWorld.vue组件中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文档

vuex官网
 5分钟带你入门vuex（vue状态管理）
vuex基本入门

安装

cnpm install vuex --save

在src中传教 store/index.js

// 引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 引入之后，对vuex进行引用
Vue.use(Vuex)

// 创建Vuex实例
const store = new Vuex.Store({
  state: {
    count: 1
  }
})

export default store

在main.js中引入vuex

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

import ElementUI from 'element-ui' // 1-element-ui
import 'element-ui/lib/theme-chalk/index.css' // 1-element-ui

import App from './App'
import router from './router'
import store from './store' // 2-Vuex

Vue.use(ElementUI) // 1-element-ui

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store, // 2-Vuex
  router,
  components: { App },
  template: '<App/>'
})

修改HelloWorld.vue

<template>
  <el-row>
    <el-button type="primary" icon="el-icon-edit" @click="click()" circle></el-button>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      value: null
    }
  },
  methods: {
    click () {
      alert(this.$store.state.count)
    }
  }
}
</script>