vuex在vue2中的使用

2,477 阅读2分钟

又到了发文章装大佬的时候了,哈哈哈哈,这也是作为我这个前端小白的进阶记录了,第二期内容了。 这期就是vue2中vuex的使用了,要学习vuex首先就是要了解vuex到底是个什么,再就是用处了 首先呢,官方文档的解读是: Vuex是一个专为Vue.js应用程序开发的状态管理模式 当项目比较庞大的时候,每个组件的状态比较多,为了方便管理,需要把组件中的状态抽取出来,放入Vuex中进行统一管理。常用的登录,购物车等一下数据的存储,当前端的项目库需要进行多页面传值和储存的时候vuex的重要性就是显而易见的了。 先看图说话哈,下面是官方文档里面vuex中数据的调用方式,先挨个介绍一下吧。

1646566132(1).png State:唯一的数据源,我们需要把任何一个组件中需要抽取出来的变量放入到state中去

Getters:通过Getters可以派生出一些新的状态

Mutations:更改Vuex的store中的状态的唯一方法时提交mutation

Actions:Action提交的是mutation,而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

我自己有个简单的方法了,就是按照箭头的反方向去思考,数据是存储在state中的,当需要使用数据时,需要通过mutations去调用数据,然而mutations有需要action中的commit方法去调用这样感觉就清晰很多了,当然也可以类比到我们的生活中,就像去饭店吃饭一样,客人点菜之后要通过服务员一步步传递到厨师的耳朵里才能给客人上菜。

首先,安装vuex

npm install vuex --save

作为一个专业守规矩的前端文件当然需要按不同的类型进行合理分类,在src路径下面新建store文件夹,文件夹下面新建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        name:"博博"
     },
    mutations: {
     },
    actions: {
     }
});

在main.js中需要要配置一下,以便于全局使用

import store from './store'

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

再就是如何使用status中储存的值了,这边就直接通过原型调用了哈哈哈哈哈哈,vue2中的this用起来还算是很舒服的

this.$store.state.name

修改变量的值

this.$store.commit('在mutations中的方法名称,参数)//将参数传给store下面的方法中,修改变量名
this.$store.commit("setToken",result.data.token)

当然了有不足的话还希望大家多提意见,下期再见哦。 今天也有个人介绍的名片了!