Vuex的基本使用——上篇

小羊同学_A
131 阅读2分钟

官方介绍: 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. 引入方式如下:

  1. 在src目录下新建store文件夹
  2. 在store文件夹新建index.js(命名不固定)
  3. index.js文件夹内容如下index.js
  4. 在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有一个更深的理解,我们还应该去阅读它的源码,学习,任重道远.

avatar
文章
阅读
粉丝