LinHuijuan's Blog

Vuex

# Vuex

参考教程：好嗨详细的vuex 源码分析之初始化的玩法 (opens new window)

[TOC]

# 一、Vuex解读

Vuex 相当于一个store仓库，存储公用数据，用来对vue应用中多个组件的共享状态进行集中式的管理（读/写）。

vuex

# 二、Vuex使用

# 2.1 安装

$ npm install -g vue-cli
$ vue init webpack my-vue
$ cd my-vue
$ npm run dev

$ npm install vuex --save
1
2
3
4
5
6

# 2.2 使用

// src/store/index.js
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {	// 可通过store.state来获取状态对象
        count: 0	// store.state.count
    },	
    mutations： {	// 可通过store.commit触发状态变更，同步操作
    	// store.commit('increment')
        increment(state) {	
        	state.count++
		},
        // 传入额外的参数
        // store.commit('increment', {amount: 10})
        
        // 对象风格的提交方式：整个对象作为载荷传给mutation函数
        // store.commit({
        //	type: 'increment',
        //  amount: 10
        // })
        increment(state, payload) {
            state.count += payload.amount
        }
	},
    actions: {	// 提交的是mutation,可包含任意异步操作
        // context对象：与store实例具有相同方法和属性
        increment1(context) {
            context.commit('increment')
        },
        // 可使用参数解构来简化代码
        // 通过store.dispatch('increment')分发action
        // 支持载荷形式和对象形式分发
        increment({commit}) {
            commit('increment')
        }
    },
    getters: {	// 相当于计算属性
        // store.getters.dontCount -> 2
        doneCount: state => state.count + 2,
        // 接受其他getter作为第二个参数 -> 3
        doneCount1: (state, getters) => getters.doneCount + 1,	
        // 通过让getter返回一个函数，来实现给getter传参
        // store.getters.doneCount2(4) -> 4
        doneCount2: state => val => val
    }
})
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
// src/main.js
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
})
1
2
3
4
5
6

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

mutation 文档 (opens new window)

actiion 文档 (opens new window)

# 三、其他

# 3.1 监听vuex的变化

computed: {
    unreadNum() {
        return this.$store.state.unreadNum
    }
},
watch: {
	unreadNu(val) {}
}
1
2
3
4
5
6
7
8
'$store.getters.unread_num': {
    handler () {
        console.log('更新了')
    },
    deep: true
}
1
2
3
4
5
6

# 3.2 mapGetters辅助函数

  • 仅仅是将store中的getter映射到局部计算属性。
import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters({
    	// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  		doneCount: 'doneTodosCount'
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# 3.3 切换账号初始化vuex数据

# 3.3.1 刷新页面

# 3.3.2 借助$options（无效）

const options = this.$options
// store injection
if (options.store) {
    this.$store = options.store
} else if (options.parent && options.parent.$store) {
    this.$store = options.parent.$store
}
1
2
3
4
5
6
7

flutter基础知识