官方介绍: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
什么时候该使用Vuex?
Vuex在管理共享状态时可以给我带来极大的便利,并且可以使得项目的可维护性加强,所以既然这么好,那是不是就意味着一定得用?我认为如果你开发的应用足够简单,那么最好不要使用,但如果你的项目十分庞大,Vuex的确可以助你一臂之力,所以,究竟怎样选择应该取决于当前的项目,没有必要为了使用而使用.
本篇只介绍Vuex中的state和getters
state
存储在Vuex中的数据和Vue实例中的data遵循相同的规则.
其实state就类似是一个共享的容器,各个组件共享这个容器里面的内容,简单来说,就是全局状态容器.
Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)),因为我的项目是用vite创建的,使用的是vue3.
引入方式如下:
- 在src目录下新建store文件夹
- 在store文件夹新建index.js(命名不固定)
- index.js文件夹内容如下index.js
- 在main.js全局挂载
import store from './store/index.js'
const app = createApp(App);
app.use(store);
app.mount('#app');
state使用演示(简单计数器案例)
// template
<button @click="add">被点击了 {{ this.$store.state.count }} 次</button>
// js
// 如果需要改变state 需要使用到mutations(这个在下篇会提到)
add() {
this.$store.commit('increment');
}
index.js
import {
createStore
} from 'vuex';
export default createStore({
state() {
return {
count: 20,
todos: [
{
id: 1,
text: '...',
done: true
},
{
id: 2,
text: '...',
done: false
}
],
}
},
mutations: {
increment(state) {
state.count++;
}
},
});
getters
getters可以认为是state的计算属性,getter的返回值会根据它的依赖缓存起来,且只有当他的依赖值发生了改变才会被重新计算.
三种使用
可以接收state作为其第一个参数
doneTodos: state => {
return state.todos.filter(todo => todo.done);qi
},
也可以接收其他getters作为第二个参数
doneTodosCount: (state, getters) => {
return getters.doneTodos.length;
},
通过getter返回一个函数 来实现给getter传参数
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id);
}
总结
经过对Vuex的初步了解,我们知道了它的使用场景,以及相关的基本用法.我觉得任何技术都是如此,在选择一项技术时应该根据自己项目的实际需求去选择,而不是哪项技术高深就选择哪项技术,当然,本篇的介绍至少最浅的,如果要对vuex有一个更深的理解,我们还应该去阅读它的源码,学习,任重道远.