vue 在js 文件中使用store_【vue】vue +element 搭建项目,vuex中的store使用

本文详细介绍了如何在Vue.js项目中使用Vuex进行状态管理,包括安装Vuex、创建store.js文件、使用actions、mutations和getters。文中提到了在js文件中使用store的方法,以及在遇到文件命名错误时的解决方案,同时展示了在组件中通过mapGetters和mapActions访问store中的数据。此外,还涉及到了如何在项目中组织模块化的store结构。
摘要由CSDN通过智能技术生成

概述:

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

store中 state为属性

store中 getter为计算属性

store中 mutation用于更改状态mutation必须是同步函数。

采用store.commit方法触发

store中的action类似于mutation,

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

Action 通过 store.dispatch 方法触发

应用:

1.依赖安装

npm install vuex --save

2.在src目录下新建文件夹 store,在该文件夹下创建store.js(此用法有报错,见下)

store.js

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({

state: {

count: 0

},

mutations: {

increment(state) {

state.count++

}

}

})

export default store

main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

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

import store from './store'

Vue.config

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值