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的 ...
随机推荐
- C# System.IO.FileMode
字段 Append 6 若存在文件,则打开该文件并查找到文件尾,或者创建一个新文件. 这需要 Append 权限. FileMode.Append 只能与 FileAccess.Write 一起使用. ...
- 分析轮子(九)- Cloneable.java
注:玩的是JDK1.7版本 一:Cloneable.java 接口也是标记接口,所以,它没有任何方法和属性,实现此接口表示的意思是:可以调用 Object.java 类的 clone() 方法,进行简 ...
- Effective Java 第三版—— 84. 不要依赖线程调度器
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- Mathematica绘制曲面交线方法(方法二)
MeshFunction方式 Show[Graphics3D[{Opacity[0.5], Ball[{0, 0, 0}, 2]}], ParametricPlot3D[{4 + (3 + Cos[v ...
- Dynamic CRM 2016 的备份/恢复/重新部署
参考:1.https://community.dynamics.com/crm/b/crmviking/archive/2016/02/03/backup-and-restore-strategies ...
- mysql灾备演练问题
前期写的mysql热备份脚本恢复,还没有正式用到过,但是今天演练灾备恢复,但是遇到几个问题. 测试环境: 搭建mysql,安装xtrabackup vim /etc/yum.repos.d/Perco ...
- ShiftRows方法简介
ShiftRows 是HSSFSheet工作薄的方法 ShiftRows(int startRow,int endRow,int n)参数介绍:startRow:开始行endRow:末尾行n:移动n行 ...
- 链接学习之obj文件探索
Windows的gcc环境,往官网http://sourceforge.net/project/showfiles.php?group_id=2435 下载MinGW,安装,安装完毕后按照包 配置环境 ...
- 【iCore1S 双核心板_ARM】例程十八:SD_IAP_FPGA实验——更新升级FPGA
实验现象及操作说明: 1.烧写程序成功,绿色ARM·LED灯点亮,三色FPGA·LED灯循环点亮,烧写失败,如果挂载SD卡失败,红灯快闪,如果打开文件失败,蓝灯快闪,读取文件指针移动失败,白灯点亮,升 ...
- springboot项目使用拦截器修改/添加前端传输到后台header和cookie参数
本质上来讲,request请求当中的参数是无法更改的,也不能添加或者删除. 但在后台程序中,一般对request的参数的操作,都是通过request的getParameter.getParameter ...