从零开始学VUE之VueX(安装和使用)

安装

npm install vuex --save
使用

在目录中新建文件夹store,在里面新建index.js

 

 

复制代码
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  }
})

export default store
复制代码
复制代码
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  }
})

export default store
复制代码

main.js挂载

复制代码
import Vue from 'vue'
import App from './App'
import router from './router'
// 导入store
import store from "./sotre";

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  // 挂载store
  store,
  render: h => h(App)
})
复制代码

组件访问

复制代码
<template>
  <div id="app">
    <h2>访问store</h2>
    <h3>{{$store.state.counter}}</h3>
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar";
export default {
  name: 'App',
  components:{
    TabBar
  }
}
</script>

<style>
@import "./assets/css/base.css";
</style>
复制代码

前端插件[需要访问Chrome插件商店,应为无法FQ,我就不安装了]

vuejs -> devtools

作者:彼岸舞

时间:2021\06\28

内容关于:VUE

本文属于作者原创,未经允许,禁止转发

 

posted @   彼岸舞  阅读(177)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示