一、vuex的目的

  把组件的共享状态抽取出来,以一个全局单例模式管理。在这种模式下,组件树构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或触发行为。

二、vuex集中式管理数据

  安装 cnpm i vuex

  

  vue init webpack-simple vuex-demo

三、核心概念:

  1、State:(初始状态,初始数据)

    从store实例中读取状态最简单的方法就是在计算属性中返回某个状态

  eg:computed:{

      count(){

        return store.state.count

      }

    }

    每当store.state.count变化的时候,都会重新求取计算属性并且触发更新相关联的DOM

  2、有时候我们需要从store中的state中派生出一些状态对列表进行过滤并计数:

    vuex允许我们在store中定义getter(可以认为是store的计算属性)。

  getter会暴露为store.getters对象通过store.getters.doneTodes获取(doneTodes时自己命名的getters函数)参数为state

  mapGetters 辅助函数

  mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

  
import { mapGetters } from 'vuex'

  export default {
   // ...
   computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
   ...mapGetters([
   'doneTodosCount',
   'anotherGetter',
   // ...
  ])
  }
  }

getter即动态的数据
3、mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})

你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:

store.commit('increment')

Mutation 必须是同步函数

4、action

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

让我们来注册一个简单的 action:

const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

实践中,我们会经常用到 ES2015 的 参数解构来简化代码(特别是我们需要调用 commit 很多次的时候):

actions: {
increment ({ commit }) {
commit('increment')
}
}
5、module

Module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

  

按键加减数字完整实例

法1:统一一个store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
var state = {
count:10
}
const actions = {
increment:({//处理干什么,判断,异步请求,流程控制
commit
})=>{
commit('increment')
},
decrement:({//处理干什么,判断,异步请求,流程控制
commit
})=>{
commit('decrement')
},
clickOdd:({
commit,state
})=>{
if(state.count%2==0){
// state.count++;
commit('increment')
}
},
clickAsync:({commit})=>{
new Promise((resolve)=>{
setTimeout(function(){
commit('increment')
},1000)
})
}//actions中可以放异步处理,但mutations中只能放同步处理
}
const mutations = {//处理数据的变化
increment(state){
state.count++;
},
decrement(state){
state.count--;
}
}
const getters = {
count(state){
return state.count;
},
isOdd(state){
return state.count%2==0?'偶数':'奇数'
}
}
//需要导出store对象
export default new Vuex.Store({
state,
actions,
mutations,
getters
})
法2、分为多个js文件分别存在store文件夹下的actions.js,state.js,mutations.js,getters.js,type.js几个文件中
eg:将上面代码分为多个文件:
1、index.js文件
  

  

 import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex);
  import mutations from './mutations'
  import actions from './actions'
  // import getters from './getters'
  import state from './state'
  export default new Vuex.Store({
  modules:{
  mutations
  },
  actions,
  state,
  getters
  })

2、actions.js

  当你的Mutations中没有export getters时这里clickOdd函数中的state.mutations.count也可以换为state.count。

  但是当你的mutations中export getters时,这里clickOdd函数中的state.mutations.count不能换为state.count了,会获取不到。

import * as types from './types.js'
export default{
increment:({commit})=>{
commit(types.INCREMENT)
},
decrement:({commit})=>{
commit(types.DECREMENT)
},
clickOdd:({commit,state})=>{
console.dir(state);
if(state.mutations.count%2==0){
commit(types.INCREMENT)
}
}

//法2:
// clickOdd:({commit,state})=>{
// console.dir(state);
// if(state.count%2==0){
// commit(types.INCREMENT)
// }
// }

,
clickAsync:({commit})=>{
new Promise((resolve)=>{
setTimeout(function(){
commit(types.INCREMENT)
},1000);
})
}
}

3、mutations.js  

import {
INCREMENT,
DECREMENT
} from './types'
import getters from './getters'
import state from './state'
//这里的INCREMENT使用方括号,不使用方括号均可
const mutations = {
[INCREMENT](state){
state.count++;
},
[DECREMENT](state){
state.count--;
}
}
export default{ state,
mutations }

//必须输出state这里输出的是变化的state,存在mutations.mutations.state中

4、type.js

 

 export const INCREMENT = 'INCREMENT'
  export const DECREMENT = 'DECREMENT'

5、getters.js 

export default{

count:(state)=>{
return state.count;
},
isOdd:(state)=>{
return state.count%2==0?'偶数':'奇数'
}
}  

6、state.js

const state = { count:20 };
export default state

 



vuex学习笔记的更多相关文章

  1. Vuex 学习笔记

    Vuex 是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.由于SPA应用的模块化,每个组件都有它各自的数据(state).视图(view)和方法(actions),当项目内容越 ...

  2. Vuex学习笔记(-)安装vuex

    什么是Vuex? vuex是一个专门为vue.js应用程序开发的状态管理模式.即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. 安装vuex(前提是已经安装好vue-cli脚手 ...

  3. Vuex 学习笔记一

    一.定义 Vuex是一个专为Vue.js应用程序开发的状态管理模式. 状态管理模式 简单的demo new Vue({ // state data () { return { count: 0 } } ...

  4. Vue学习—— Vuex学习笔记

    组件是Vue最强大的功能之一,而组件实例的作用域是相互独立的,意味着不同组件之间的数据是无法相互使用.组件间如何传递数据就显得至关重要,这篇文章主要是介绍Vuex.尽量以通俗易懂的实例讲述这其中的差别 ...

  5. 【整理】解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function

    解决vue不相关组件之间的数据传递----vuex的学习笔记,解决报错this.$store.commit is not a function https://www.cnblogs.com/jaso ...

  6. 【Vue学习笔记】—— vuex的语法 { }

    学习笔记 作者:o_Ming vuex Vuex ++ state ++ (用于存储全局数据) 组件访问 state 中的全局数据的方式1: this.$store.state.全局数据 组件访问 s ...

  7. 7 种 Javascript 常用设计模式学习笔记

    7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...

  8. vuex学习详细解(主页目录

    学习vuex过程中,通过 vue-cli命令来配置和使用vuex笔记整理 vue-cli中配置vuex流程和注意事项 vuex目录配置 vuex的states.js vuex的getters.js v ...

  9. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

随机推荐

  1. [国嵌攻略][097][U-Boot新手入门]

    嵌入式软件层次 1.Bootloader 2.Linux内核 3.文件系统 编译U-Boot 1.解压uboot tar zxvf uboot.tar.gz 2.清除uboot make distcl ...

  2. [国嵌笔记][021-022][ARM处理器工作模式]

    [ARM处理器工作模式] 处理器工作模式 1.User(urs):用户模式,linux应用程序运行在用户模式 2.FIQ(fiq):快速中断模式 3.IRQ(irq):中断模式 4.Superviso ...

  3. [国嵌笔记][019][Eclipse集成开发环境]

    Eclipse集成开发环境的作用 可以编译程序,也可以对程序进行在线调试 集成开发环境 1.JLink连接开发板的JTAG 2.JLink连接PC的USB 3.eclipse软件 4.gdb serv ...

  4. DFS算法(——模板习题与总结)

    首先,需要说明的是搜索算法本质上也是枚举的一种,时间复杂度还是很高的,遇到问题(特别是有水平的比赛上),不要优先使用搜索算法. 这里总结一下DFS算法: 1.从图中某个顶点出发,访问v. 2.找出刚访 ...

  5. solrcloud(solr集群版)安装与配置

    1 Solr集群 1.1 什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的 ...

  6. TPshop学习(8)微信支付

    http://blog.csdn.net/phper8/article/details/76383415 学习内容: https://www.kancloud.cn/tpshop/thinkphp5/ ...

  7. phpstudy本地搭建域名访问

    http://blog.csdn.net/camillezj/article/details/54694554 步骤如下: 一.hosts配置: 1.用编辑器打开hosts文件,位置:C:\Windo ...

  8. WEB应用:预览

    主题 建立WEB应用通用目录 配置classpath 将WEB应用注册到服务器中 使用制定url前缀调用WEB应用的servlet.html.jsp 为所有自己编写的servlet制定url 建立WE ...

  9. 【Asp.net Core】在 Linux 子系统中安装 nginx 并配置反向代理

    上一篇鸟文中,老周已经介绍过在 Ubuntu 子系统中安装 dotnet-sdk 的方法,本文老周给大伙伴们说说安装 nginx 服务,并配置反向代理.同样,老周假设你从来没有用过 Linux,所以老 ...

  10. <%=pageCount %>

    <%=pageCount %>,这里是指获取页面控件的值.