vue-cli+webpack+router+vuex---之vuex使用
有信心的可以去看官方的文档
vue 的官方文档有个显著的特点---代码粘贴不全
Vue中文站:cn.vuejs.org
vue-router官方教程:router.vuejs.org/zh-cn
vuex官方教程:vuex.vuejs.org/zh-cn
实例项目地址
https://git.oschina.net/rtdk/Rain-vuex.git
我默认你的vue-cli已经装好了你会有这么一个目录
这里不用我解释了吧! <*_*> 如果还不会安装vue-cli的可以 去我的之前的博客观看 vue脚手架---vue-cli
现在开始准备工作
1-0 现在src目录下创建store文件夹
1-1 在store文件夹下创建
index.js // 文件都会汇聚到这个地方来,也是创建store对象的地方,就像store的入口一样
actions.js //存放vuex的核心处理函数
getters.js //工具接口为了方便构建全局state自定义方法
mutations.js //改版store中各种状态的地方
rootState.js //我参考一个大神的做法创建rootState.js保存顶层的数据
配置数据
2-0 src->store->index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as mutations from './mutations';
import * as getters from './getters';
import state from './rootState';
Vue.use(Vuex)
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
export default store;
2-1 src->main.js
将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-default/index.css'
import store from './store/index'; //element-ui使用
//Vue.use(ElementUI) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
//一个实例
src->components->demo-vuex.vue
<template>
<div>
{{name}}
<button @click="fun">点击改变msg</button>
<br>
msg: {{msg}}
</div>
</template>
<style scoped> </style>
<script>
import {mapGetters, mapActions} from 'vuex';
export default{
data(){
return {
name:"demo-vuex"
}
},
computed: {...mapGetters(['msg'])}, //对应getters.技术中的msg
methods: {...mapActions(['fun'])} //对应 Actions中fun方法
}
</script>
目的很简单 点击按钮 改变msg的值
测试组件src->components->demo-vuex2.vue
<template>
<div>
{{msg}}
</div>
</template>
<style scoped> </style>
<script>
import {mapGetters} from 'vuex';
export default{
data(){
return {}
},
computed:{...mapGetters(['msg'])} }
</script>
该组件为了查看是否实现组件间的传值问题
路由配置 src->router->index.js
import Vue from 'vue'
import Router from 'vue-router'
import Demo from 'components/demo-vuex'
import Demo2 from 'components/demo-vuex2' Vue.use(Router)
export default new Router({
routes: [
{
path: '/demo',
name: 'demo',
component: Demo
},
{
path: '/demo2',
name: 'demo2',
component: Demo2
}
]
})
src->store->rootState.js
const state = {
msg: '我是原始数据',
}
export default state;
我把rootState.js当做数据初始化的地方 初始化msg 并暴露出state
src->store->actions.js
export const fun = ({commit}) => {
commit({
type: 'getMsg', //对应mutation.js中的getMsg方法
msg: '我是修改后的数据...'
});
};
把将要修改的值发送到mutations.js中---值只允许在mutations.js中修改
src->store->mutations.js
export const getMsg = (state, payload) => {
state.msg = payload.msg;
}
修改state.msg值 , payload.msg对应actions.js中传过来的值
src->store->getters.js
export const msg = state => state.msg;
最简单的服务 将值获取再返回
测试一下 对不对
运行
npm run dev
浏览器输入
http://localhost:8080/#/demo
看到一下界面
点击后数据改变
从其他组件测试一下
浏览器输入
http://localhost:8080/#/demo2 看看是否是改变后的数据
vue-cli+webpack+router+vuex---之vuex使用的更多相关文章
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vue全家桶router、vuex、axios
main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- day 87 Vue学习六之axios、vuex、脚手架中组件传值
本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...
- Vue(5)- axios、vuex
一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loade ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
随机推荐
- BI 系列随笔列表 (SSIS, SSRS, SSAS, MDX, SQL Server)
微软 BI ETL 架构设计 如何在 ETL 项目中统一管理上百个 SSIS 包的日志和包配置框架 如何管理和记录 SSIS 各个 Task 的开始执行时间和结束时间以及 Task 中添加|删除|修改 ...
- TensorFlow实战Google深度学习框架1-4章学习笔记
目录 第1章 深度学习简介 第2章 TensorFlow环境搭建 第3章 TensorFlow入门 第4章 深层神经网络 第1章 深度学习简介 对于许多机器学习问题来说,特征提取不是一件简单的事情 ...
- iOS实现图片裁剪功能,基于TKImageView完善与讲解
1.功能需求:需要实现图片区域裁剪功能. 2.效果图: 3.实现原理:本来想自己实现的,刚好看到一个比较好的库:TKImageView,下载好研究了下,发现基本都能满足我的需求,而且封装的也比 ...
- .NET 同步与异步 之 EventWaitHandle(Event通知) (十三)
本随笔续接:.NET 同步与异步 之 Mutex (十二) 在前一篇我们已经提到过Mutex和本篇的主角们直接或间接继承自 WaitHandle: Mutex类,这个我们在上一篇已经讲过. Event ...
- TCP连接数过多问题
在一次生产上线后,发现使用的 8086 端口相关的 TCP 连接数竟然多大 6K+ ,有时候甚至会逼近 1w ,这个数量对于一个只是在内部使用的监控系统来说, 无论如何都是无法接受的, 于是开 ...
- Django 复习
Django 基础1 day49 老师的博客:https://www.cnblogs.com/yuanchenqi/articles/6083427.html http://www.cnblogs.c ...
- invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Mac系统升级git会找不到并且报错:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools) ...
- BTARN 接收消息流以3A7为例
 1.RNIFReceive.aspx 页接收来自发起方的传入消息. (如果发起方是BizTalk则类似于:http://localhost/BTARNApp/RNIFSend.aspx?TPUrl ...
- springmvc(五) 数据回显与自定义异常处理器
这章讲解一下springmvc的数据回显和自定义异常处理器的使用,两个都很简单 --WH 一.数据回显技术 Springmvc默认支持对pojo类型的数据回显,默认不支持简单类型的数据回显 1.1.什 ...
- .NET HttpGet 获取服务器文件下的图片信息 同步和异步方式处理
/// <summary> /// 项目文件夹下路径 返回流类型数据,如:图片类型 /// </summary> /// <returns></returns ...