5. vuex详解

5.1. vuex 基本使用

通过vuex可以存储一些公共数据，方便整体系统进行使用和操作。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)


const store = new Vuex.Store({
  state: {
    counter:10000
  },
  mutations: {
    add(state){
      state.counter +=1
    },
    sub(state){
      state.counter-=1
    }
  },
  actions: {},
  getters: {},
  modules: {},
})

export default store

5.2. vuex getter

getter 类似组件的属性，不会每次获取的时候都进行计算。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)


const store = new Vuex.Store({
  state: {
    counter:10000,
    students:[
      {id:1,firstName:"jiedi01", secondName: "zhao",age:21,height:165},
      {id:2,firstName:"jiedi02", secondName: "zhao",age:22,height:170},
      {id:3,firstName:"jiedi03", secondName: "zhao",age:25,height:175},
      {id:4,firstName:"jiedi04", secondName: "zhao",age:30,height:180},
    ]

  },
  mutations: {
    add(state){
      state.counter +=1
    },
    sub(state){
      state.counter-=1
    }
  },
  actions: {},
  getters: {
    powerCounter(state){
      return  state.counter * state.counter
    },
    ageMore25Count(state){
      return state.students.filter(student=>student.age>=25).length
    },
    StudentById(state){
      // 这是返回一个函数， 参数是接受一个参数的
      // 好理解的写法
      // let infoByid=function (id){
      //   return state.students.find(s=>s.id===id)
      // }
      // return infoByid

      // 简写的写法
      return (id)=>state.students.find(s=>s.id===id)

    }
  },
  modules: {},
})

export default store

5.3. vuex mutation

mutation 可以做一些同步操作，方便使用dev工具进行前段调整。 .. literalinclude:: ../../中级学习/07-vuex/02-vuexlearn-mutation/store/index.js

encoding

utf-8

language

javascript

emphasize-lines

1

linenos

5.4. vuex action

mutation 可以做一些同步操作，有些异步操作，就需要action了， 然后action操作mutation可以跟着变化。

5.5. vuex module

module是可以做多个模块的， 方便管理

5.6. vuex 文件拆解

随着项目越来越大， 单个index.js不太方便文件管理的，需要进行拆分管理。

ls -1  中级学习/07-vuex/06-vuexlearn-文件拆解/store/

actions.js
getters.js
index.js
modules
mutations.js
state.js