vuex学习笔记

Posted 前端++

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex学习笔记相关的知识,希望对你有一定的参考价值。

一、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,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({
  //法1:对应mutations中的法1也对应actions中的法1
  modules:{
  mutations
  },
  actions
  //-----------------------
  // //法2:
  // state,
  // mutations,
  // getters,
  // actions
  })

2、actions.js

  

import * as types from ‘./types.js‘
export default{
increment:({commit})=>{
commit(types.INCREMENT)
},
decrement:({commit})=>{
commit(types.DECREMENT)
},
//法1:
// clickOdd:({commit,state})=>{
// if(state.mutations.count%2==0){
// commit(types.INCREMENT)
// }
// }
//法2:
clickOdd:({commit,state})=>{
console.dir(state);
if(state.mutations.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‘
const state = {
count:20
};
//变量使用方括号
const mutations = {
[INCREMENT](state){
state.count++;
},
[DECREMENT](state){
state.count--;
}
}
export default{
//法1:
state,
mutations,
getters

//-------------------法2
// state,
// mutations

}

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?‘偶数‘:‘奇数‘
}
}  

  



以上是关于vuex学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记:python3,代码片段(2017)

Vuex学习笔记1

Vue 学习总结笔记

vuex学习笔记

vuex的学习笔记

vuex学习笔记