vuex学习笔记

1、vuex的目的

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

2、vuex集中式管理数据

　　安装 cnpm i vuex

　　

 　　vue init webpack-simple vuex-demo

3、核心概念：

　　一、State：（初始状态，初始数据）

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

　　eg:computed:{

　　　　　　count(){

　　　　　　　　return store.state.count

　　　　　　}

　　　　}

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

 

　　二、有时候咱们须要从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即动态的数据
三、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 必须是同步函数

四、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') } }

五、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
})

 

法二、分为多个js文件分别存在store文件夹下的actions.js,state.js,mutations.js,getters.js,type.js几个文件中
eg:将上面代码分为多个文件：
一、index.js文件
　　

　　

 1 import Vue from 'vue'
 2 　　import Vuex from 'vuex'
 3 　　Vue.use(Vuex);
 4 　　import mutations from './mutations'
 5 　　import actions from './actions'
 6 　　// import getters from './getters'
 7 　　import state from './state'
 8 　　export default new Vuex.Store({
 9 　　modules:{
10 　　mutations
11 　　},
12 　　actions,
13 　　state,
14 　　getters
15 　　})

 

二、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);
})
}
}

 

三、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中

四、type.js

　

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

 

五、getters.js　

export default{

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

 

六、state.js

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