Vuex用法笔记

Vuex 是专门为 Vue.js 设计的状态管理库,它采用集中式存储管理应用的所有组件的状态。

为什么需要状态管理

当我们的应用遇到多个组件共享状态时,会需要:

  • 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。这需要你去学习下,vue编码中多个组件之间的通讯的做法。
  • 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱,通常会导致无法维护的代码。Vuex解决了组件之间共享同一状态的麻烦问题。关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的,而现在有了vuex,就组件就都和store通讯了。问题就自然解决了

具体用法

安装Vuex:

1
npm install vuex --save

然后在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

1
2
3
4
5
6
7
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store();

export default store;

然后在main.js里面引入store,全局注入一下,这样就可以在任何一个组件里面使用this.$store了:

1
2
3
4
5
6
7
8
9
import store from './store'//引入store

new Vue({
el: '#app',
router,
store, // 使用store
template: '<App/>',
components: { App }
})

Getters

Vuex允许我们在store中定义getter,就像计算属性一样,getter的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getter接受state作为其第一个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})

export default store;

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Mutation接受state作为其第一个参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})

export default store;

在组件中想要触发一个类型为increment的mutation`时,要这样:

1
this.$store.commit('increment');

也可以向store.commit传入额外的参数:

1
2
3
4
5
6
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
1
this.$store.commit('increment', 10)

Action

Action类似于mutation,不同在于:

  • Action提交的是mutation,而不是直接变更状态。
  • Action可以包含任意异步操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
actions: {
checkout ({ commit, state }, products) {
// 把当前购物车的物品备份起来
const savedCartItems = [...state.cart.added]
// 发出结账请求,然后乐观地清空购物车
commit(types.CHECKOUT_REQUEST)
// 购物 API 接受一个成功回调和一个失败回调
shop.buyProducts(
products,
// 成功操作
() => commit(types.CHECKOUT_SUCCESS),
// 失败操作
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}

Action通过store.dispatch方法触发:

1
this.$store.dispatch('xxx')

参考


----------- 本文结束啦感谢您阅读 -----------

赞赏一杯咖啡

欢迎关注我的其它发布渠道