有信心的可以去看官方的文档

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使用的更多相关文章

  1. Vue CLI Webpack 创建Vue项目

    简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  2. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  3. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  4. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  5. vue全家桶router、vuex、axios

    main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...

  6. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  7. day 87 Vue学习六之axios、vuex、脚手架中组件传值

      本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...

  8. Vue(5)- axios、vuex

    一.内容回顾 1.webpack(前端中工作,项目上线之前对整个前端项目优化) - entry:整个项目的程序入口(main.js或index.js): - output:输出的出口: - loade ...

  9. @vue/cli 3.x项目脚手架 webpack 配置

    @vue/cli  是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli   基于node服务  需要8.9以上版本 可以使用 nvm等工具来控制node版本  构建于 webpack ...

  10. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

随机推荐

  1. BI 系列随笔列表 (SSIS, SSRS, SSAS, MDX, SQL Server)

    微软 BI ETL 架构设计 如何在 ETL 项目中统一管理上百个 SSIS 包的日志和包配置框架 如何管理和记录 SSIS 各个 Task 的开始执行时间和结束时间以及 Task 中添加|删除|修改 ...

  2. TensorFlow实战Google深度学习框架1-4章学习笔记

    目录 第1章 深度学习简介 第2章 TensorFlow环境搭建 第3章 TensorFlow入门 第4章 深层神经网络   第1章 深度学习简介 对于许多机器学习问题来说,特征提取不是一件简单的事情 ...

  3. iOS实现图片裁剪功能,基于TKImageView完善与讲解

    1.功能需求:需要实现图片区域裁剪功能. 2.效果图:     3.实现原理:本来想自己实现的,刚好看到一个比较好的库:TKImageView,下载好研究了下,发现基本都能满足我的需求,而且封装的也比 ...

  4. .NET 同步与异步 之 EventWaitHandle(Event通知) (十三)

    本随笔续接:.NET 同步与异步 之 Mutex (十二) 在前一篇我们已经提到过Mutex和本篇的主角们直接或间接继承自 WaitHandle: Mutex类,这个我们在上一篇已经讲过. Event ...

  5. TCP连接数过多问题

        在一次生产上线后,发现使用的 8086 端口相关的 TCP 连接数竟然多大 6K+ ,有时候甚至会逼近 1w ,这个数量对于一个只是在内部使用的监控系统来说, 无论如何都是无法接受的, 于是开 ...

  6. Django 复习

    Django 基础1 day49 老师的博客:https://www.cnblogs.com/yuanchenqi/articles/6083427.html http://www.cnblogs.c ...

  7. 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) ...

  8. BTARN 接收消息流以3A7为例

     1.RNIFReceive.aspx 页接收来自发起方的传入消息. (如果发起方是BizTalk则类似于:http://localhost/BTARNApp/RNIFSend.aspx?TPUrl ...

  9. springmvc(五) 数据回显与自定义异常处理器

    这章讲解一下springmvc的数据回显和自定义异常处理器的使用,两个都很简单 --WH 一.数据回显技术 Springmvc默认支持对pojo类型的数据回显,默认不支持简单类型的数据回显 1.1.什 ...

  10. .NET HttpGet 获取服务器文件下的图片信息 同步和异步方式处理

    /// <summary> /// 项目文件夹下路径 返回流类型数据,如:图片类型 /// </summary> /// <returns></returns ...