1.  安装webpack的问题: webpack坑系列--安装webpack-cli

2.  vue-cli(vue脚手架)超详细教程

3.  在命令行中使用 touch 执行新建文件;

4.  关于Vue.use()详解

5. vuex 最简单的介绍

  目录如左侧所示,主要是标红的三个文件。

5.1 store文件,编写vuex的各个功能,包括:

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const state = { // 定义状态数据
count: 2
} const mutations = { // 定义方法,操作数据
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
} const actions = {
add: ({commit}) => { // 触发上述的方法,对外提供的方法接口,可以在这里提供异步操作
commit('increment')
},
reduce: ({commit}) => {
commit('decrement')
}
} export default new Vuex.Store({state, mutations, actions})

5.2 然后在main文件中,引入store 注意这里是小写的store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

5.3 最后在vue文件中调用:

<template>
<div>
<h1>{{ $store.state.count }}</h1>
<button type="button" @click="add">增加</button>
<button type="button" @click="reduce">删减</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: mapActions([
'add',
'reduce'
])
}
</script>

注意:在5.2中挂在元素时,加入的store,才能在接下来的文件中,引用到 $store

6.  mapState 的使用方法   (文章标题:   state,mapState,...mapState对象展开符详解 )

注意的是: 用data接收的 $store 不能及时响应更新,用computed就可以.

7. 多个组件使用不同的vuex:

主要涉及上面三个地方,其中

1、  main.js 主要用来引入注册 store,

2、 store文件夹下定义不同页面或组件对应的 vuex数据,并且有index来进行统一的对外输入,

3、 componments文件夹喜爱定义的a和b等组件是html范畴,调用vuex

具体如下所示:

(1)main文件引入 store的index文件如下所示:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'//注意这里引入的是store文件夹下的index文件
Vue.config.productionTip = false new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})

(2) index文件 引入a和b文件

import Vue from 'vue';
import Vuex from 'vuex';
import moneys from './modules/a'
import counts from './modules/b' Vue.use(Vuex)//安装注册vuex export default new Vuex.Store({//实例话vuex,并引入两个vuex定义的函数
modules:{
moneys,
counts
}
})

(3)store文件夹下的a.js

const state = {//定义state
money: 10
} const mutations = {//定义操作数据方法
add(state,parmas) {//接受传参的方法
state.money+=parmas;
},
reduce(state) {
state.money--
}
} const actions = {//定义外部接口,包括异步处理
add: ({commit},parmas) => {//注意这里的传参方式
commit('add',parmas)
},
reduce: ({commit}) => {
commit('reduce')
}
} export default {//抛出定义的函数和开启命名空间
namespaced:true, //用于在全局引用此文里的方法时标识这一个的文件名
state, mutations, actions }

对应的b与其类似。对外的index文件如下:

import Vue from 'vue';
import Vuex from 'vuex';
import moneys from './modules/a'
import counts from './modules/b' Vue.use(Vuex)//安装注册vuex export default new Vuex.Store({//实例话vuex,并引入两个vuex定义的函数
modules:{
moneys,
counts
}
})

(4)对应的vue调用vuex

<template>
<div class="box">
<div>{{$store.state.moneys.money}}</div><!-- 注意这里调用到的state值,需要带上命名空间moneys-->
<button @click="add(2)">增加</button>
<button @click="reduce">减少</button>
</div> </template>
<script>
import {mapActions} from 'vuex'
export default {
methods: mapActions('moneys',['add','reduce'])//注意这里的命名空间 moneys
  //this.$store.dispatch('delTask', {task, index});  传递多个参数的时候 写成一个对象
}
</script>

以下两个方式一样:

changeTab(index){
this.$store.dispatch('leftNav/changeTab',index) //left是命名空间,index是传递的参数
},
//...mapActions('leftNav',['changeTab'])

分发事件和常规事件混合方法:

methods: {
...mapActions('a',['changeData']), //注意这里要写上...符号
triger:()=>{
alert(1);
}
}

附:   超简单入门Vuex小示例

vue全家桶+Koa2开发笔记(1)--vuex的更多相关文章

  1. vue全家桶+Koa2开发笔记(5)--nuxt

    1. nuxt项目初始化报错 下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2: 官方 https://zh.nuxtjs.org/guide/instal ...

  2. vue全家桶+Koa2开发笔记(7)--登陆注册功能

    1 文件结构:pages中放置页面代码:server 分为 dbs 和interface两个文件夹: dbs设置有关数据库的代码:interface设置接口信息: 2.2 先看dbs的,在dbs的配置 ...

  3. vue全家桶+Koa2开发笔记(6)--app开发

    1.环境配置 详见文章<Nuxt 开发 - 项目初始化> 1.1  使用nuxt脚手架  https://zh.nuxtjs.org/guide/installation 1.2 在nod ...

  4. vue全家桶+Koa2开发笔记(2)--koa2

    1. 安装koa脚手架的时候 执行命令 koa2 -e koa-learn 注意要使用-e的方式,才会生成ejs的模板 2. async await的使用方法:存在的意义:提高promise的可读性 ...

  5. vue全家桶+Koa2开发笔记(8)--开发网页

    1.使用 mongoose 动态倒入数据 mongoimport -d student -c areas areas.dat -d 后面是数据库名称: -c后面是表名称 最后是数据源 2.使用vue的 ...

  6. vue全家桶+Koa2开发笔记(4)--redis

    redis用来在服务器端存放session 1 安装redis    brew install redis 启动redis   redis-server 2 安装两个中间件  npm i koa-ge ...

  7. vue全家桶+Koa2开发笔记(3)--mongodb

    1. 安装 momgodb brew install mongodb安装成功后执行 which mongod启动:mongod 2. 下载可视化操作数据库的软件 https://robomongo.o ...

  8. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  9. [在线+源码]vue全家桶+Typescript开发一款习惯养成APP

    # vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. [源码地址](https://github.com/xiaomuzhu/vue ...

随机推荐

  1. nginx:负载均衡实战(一)

    1.负载均衡说明 2.准备 我自己在电脑布置了两台虚拟机,两台都有nginx和tomcat,两台虚拟机布置的ip分别是37以及54,我在tomcat的首页动了点手脚,方便自己看是来自哪个ip的 接着在 ...

  2. 【原创】paintEvent()函数显示文本

    [代码] void MainWindow::paintEvent(QPaintEvent*) { QPainter p(this); QRect r; p.setPen(Qt::red); p.dra ...

  3. Docker安装websphere(四)

    在Docker容器里安装webshpere <!--前提:已经安装好了docker,能够正常使用.--> (1)docker安装websphere(需要账号和密码登录,不挂载数据卷) 获取 ...

  4. opencv测试代码

    摄像头摄影 #include <iostream>#include <opencv2/opencv.hpp>using namespace cv;using namespace ...

  5. 7.6 C++基本序列式容器效率比较

    参考:http://www.weixueyuan.net/view/6403.html 总结: 对于vector而言,它只是一个可以伸缩长度的数组 对于deque而言,它是一个可以操作头部和尾部的并且 ...

  6. 谈谈你对Java面向对象的理解

    面向对象,其实是一种思考的思想,是一种思想,而这种思想它早期的思想是面向过程,通过不断的演化变成了现在的面向对象,思想有一个演变形式,早期是面向过程,现在是面向对象. 故事:把大象放进冰箱里,分几步? ...

  7. Centos7部署kubelet(六)

    1.二进制包准备将软件包从linux-node1复制linux-node2.linux-node3中去 [root@linux-node1 ssl]# cd /usr/local/src/kubern ...

  8. struts请求参数注入的三种方式

    .请求参数的注入 在Struts2框架中,表单的提交的数据会自动注入到与Action对象相对应的属性.它与Spring框架中的IoC的注入原理相同,通过Action对象为属性提供setter方法注入 ...

  9. Appium Python API

    1.contexts contexts(self): Returns the contexts within the current session. 返回当前会话中的上下文,使用后可以识别H5页面的 ...

  10. L308 New brain cells made throughout life

    People keep making new brain cells throughout their lives (well at least until the age of 97), accor ...