vuex官网文档 https://vuex.vuejs.org/zh-cn/

注: Mutation事件使用commit触发, Actions事件使用dispatch触发

安装 npm install vuex --save

创建store文件/store.js

// store.js
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
let state = {
// 管理所有数据
name: 'default name'
} let mutations = {
// 如需要修改state, 全部方法集中在这管理
change(state, name){
state.name = name
}
} let actions = {
// 组件所有的 异步,同步事件在这里处理
change({commit}){
var name = 'ajanuw'
commit('change', name);// 需要修改state.name交更mutations处理
}
} let getters = {
// 组件需要 state数据全部在这里请求
getName(state){
return state.name
}
} // 导出
export default new Vuex.Store({
actions,
getters,
mutations,
state
})

main.js 获取store

// main.js
import store from './store/store.js'
new Vue({
store
})

组件内部

// App.vue
<template>
<div id="app">
<p>{{ getName}}</p>
<button @click="change"> change name</button>
</div>
</template> <script>
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters([
'getName'
]), methods: mapActions([
'change'
])
}
</script>

分离store.js

└─store
actions.js
getters.js
mutations.js
state.js
store.js
---
// store.js
import Vue from 'vue'
import Vuex from 'vuex' import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters' Vue.use(Vuex) // 导出
export default new Vuex.Store({
actions,
getters,
mutations,
state
}) ---
// state.js
export default {
// 管理所有数据
name: 'default name'
}

补充一个 mapState

// App.js

import {mapGetters, mapActions, mapState} from 'vuex'

  computed: mapState({
age: 'age', // 映射 state.age tody(){// 定义局部数据
return "好日子"
}, storeName(state){// this指向局部
return `${state.name} ${this.name}`
}
}), render(h){
return (
<p>{ this.age }</p>
<p>{ this.tody }</p>
<p>{ this.storeName }</p>
);
}

一些vuex操作, dispatch

// App.js
import {mapState, mapGetters, mapActions} from 'vuex' export default {
data(){
return {
name: 'ajanuw'
}
},
computed:{
...mapState({
defaultname: 'name',
num: 'num'
})
},
methods:{
hello(msg){
return `hello ${msg}`
},
...mapActions({// 映射store里面的action.prop
decrease: 'decrease'
})
},
render(){
var store = this.$store;
return (
<div id="app">
/*methods钩子的的函数*/
<p>{ this.hello('vue vuex jsx') }</p>
<br />
/*data钩子里的的state*/
<p>hello {this.name}</p>
<br />
/*映射store里面的state*/
<p>{this.defaultname}</p>
<br />
/*store.dispatch() 派发事件*/
<p>
<button onClick={ ()=>store.dispatch('addnum', 1) } >click延迟一秒+1 => {this.num}</button>
</p> <br /> /* 使用mapActions() 映射store的action*/
<p>
<button onClick={ ()=> this.decrease(2) } >click延迟一秒-2 => {this.num}</button>
</p> <br />
</div>
)
},
mounted(){
console.log( this);
}
}
// store.js
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); let state = {
name: 'default name',
num: 0
} let mutations = {
addnum(state, n){
state.num += n;
}, decrease(state, n){
state.num -= n;
}
} let actions = {
addnum(ctx, n){
setTimeout( ()=> ctx.commit('addnum', n), 1000);
}, decrease(ctx, n){
setTimeout( ()=> ctx.commit('decrease', n), 1000);
}
} let getters = { } export default new Vuex.Store({
actions,
getters,
mutations,
state
});

module 分割store https://vuex.vuejs.org/zh-cn/modules.html

// App.js
import {mapState, mapGetters, mapActions} from 'vuex'; export default {
data(){
return {}
},
created(){
this.$store.registerModule('modelC', {
// 动态注册一个model
// store.unregisterModule(moduleName) 来动态卸载模块
namespaced: true,
state: {
msg: '动态modelC'
}
});
},
methods:{
...mapActions('modelA', {
show: 'show'
})
},
render(){
const store = this.$store;
return (
<div id="app">
<p>hello</p>
<p onClick={()=>store.dispatch('modelA/show')}>modelA => {store.state.modelA.msg}</p> <p onClick={ ()=>store.dispatch('modelB/show') }>modelB => {store.state.modelB.msg}</p>
</div>
)
},
mounted(){
this.show();
console.log( this.$store.state.modelC.msg );
this.$store.unregisterModule(modelC);
// modelC 已经被卸载,下面的代码将会报错
console.error( this.$store.state.modelC.msg );
}
}
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
/*
默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的
这样使得多个模块能够对同一 mutation 或 action 作出响应。 如果希望你的模块具有更高的封装度和复用性,
你可以通过添加 namespaced: true 的方式使其成为命名空间模块。
当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
*/ const modelA = {
namespaced: true,
state: {
msg: 'this is modelA',
},
mutations: {},
actions: {
show(ctx){
console.log( ctx.state.msg );
}
},
getters: {}
} const modelB = {
namespaced: true,
state: {
msg: 'this is modelB',
},
mutations: {},
actions: {
show(ctx){
console.log( ctx.state.msg );
}
},
getters: {}
} const store = new Vuex.Store({
modules: {
modelA,
modelB
}
}); export default store;

萌新 学习 vuex的更多相关文章

  1. 萌新学习Python爬取B站弹幕+R语言分词demo说明

    代码地址如下:http://www.demodashi.com/demo/11578.html 一.写在前面 之前在简书首页看到了Python爬虫的介绍,于是就想着爬取B站弹幕并绘制词云,因此有了这样 ...

  2. php萌新|学习|排坑|のmysqli_error()方法的妙用

    从开始学习php当现在已经有一个月多.除了每天完成公司布置的日常汇报,也没有耐下性子写一写自己想写的东西.今天就当起个头,坚持一周有个两三片文章或者小总结,也不枉费自己的付出.(我自己都不信,你会信吗 ...

  3. 萌新学习SpringMVC

    前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 这篇SpringMVC被催了很久了,这阵子由于做 ...

  4. 萌新学习图的强连通(Tarjan算法)笔记

    --主要摘自北京大学暑期课<ACM/ICPC竞赛训练> 在有向图G中,如果任意两个不同顶点相互可达,则称该有向图是强连通的: 有向图G的极大强连通子图称为G的强连通分支: Tarjan算法 ...

  5. IIFE 萌新学习笔记

    立即执行函数表达式(IIFE) IIFE:Immediately-Invoked Function Expression(立即执行函数表达式) 一 常用写法: //经常使用的写法(function() ...

  6. 萌新笔记——C++里创建 Trie字典树(中文词典)(三)(联想)

    萌新做词典第三篇,做得不好,还请指正,谢谢大佬! 今天把词典的联想做好了,也是比较low的,还改了之前的查询.遍历等代码.  Orz 一样地先放上运行结果: test1 ID : char : 件 w ...

  7. 萌新笔记——C++里创建 Trie字典树(中文词典)(二)(插入、查找、导入、导出)

    萌新做词典第二篇,做得不好,还请指正,谢谢大佬! 做好了插入与遍历功能之后,我发现最基本的查找功能没有实现,同时还希望能够把内存的数据存入文件保存下来,并可以从文件中导入词典.此外,数据的路径是存在配 ...

  8. 萌新笔记——C++里创建 Trie字典树(中文词典)(一)(插入、遍历)

    萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...

  9. 萌新关于C#委托一点见解

    开博第一写C#委托(一个简单的委托) 1.关于委托,一直是学习c#的萌新们的噩梦,小生也是.最近在学委托感觉瞬间被虐成狗,但作为C#中极为重要的一个内容,学好了将会及大地减少我们的代码量,而且这也是够 ...

随机推荐

  1. Unity3d如何profile模拟器

    最近有反馈X2在一些模拟器中运行偶尔非常卡,达到5秒左右,而这类问题在真机上没出现过,于是想用unity profile下模拟器.但模拟器是运行在虚拟机里面的,市面上大多模拟器并没有提供虚拟机网络设置 ...

  2. Mac下的Jenkins安装

    安装方式 1)通过命令行安装   brew install jenkins,可能会遇到先更新 brew 的情况  https://brew.sh/index_zh-cn: 2)通过 pkg 安装,官方 ...

  3. Glide4 用法总结 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. centos7上 docket无权限的问题

    2.4 centos7上 docket无权限的问题,解决方案: https://stackoverflow.com/questions/24288616/permission-denied-on-ac ...

  5. 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

    在须要给文档插入大量的html 标记下.通过DOM操作非常麻烦,你不仅要创建一系列的节点,并且还要小心地依照顺序把它们接结起来. 利用html 标签 插入技术,能够直接插入html代码字符串,简单.高 ...

  6. C# 批量图片打包下载

    实现点击下载功能,可以一次性下载多个附件.具体实现代码如下 : private void Com_XZTP_FJ(string maiId, string wtfjdz, string CLwtfjd ...

  7. Spring Boot项目的接口防刷

    说明:使用了注解的方式进行对接口防刷的功能,非常高大上,本文章仅供参考 一,技术要点:springboot的基本知识,redis基本操作, 首先是写一个注解类: import java.lang.an ...

  8. 【数据库】——SQLite使用drop column删除表字段

    由于项目需求变更,我需要在sqlite的表中删除一个字段,通用的sql操作语句如下: alter table task drop column custom_fields; 结果数据库提示如下错误: ...

  9. 删除maven仓库中的LastUpdated文件

    转自:http://www.oschina.net/code/snippet_151849_49131 @echo off rem create by sunhao(sunhao.java@gmail ...

  10. 关于Unity中摇杆的操作

    之前在解决摇杆控制角色的时候使用的是RPG游戏中主角的运动方式,有八个方向,最近找到一个新的方法,可以比较流畅地控制角色各个方向的移动 步骤 1.Easy Touch插件,角色控制器组件 2.在控制角 ...