正文

vuex学习笔记

IP云
IP云V管理员/6 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、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

相关阅读

目录[+]