Vue中使用Vuex保存数据

文章目录

一、Vuex是什么

二、使用步骤

1.先安装vuex

2.导入Vuex

3.编写index.js

4.在组件中使用vuex保存和获取数据 

---

一、Vuex是什么

        Vuex是一个专为Vue.js应用程序开发的状态管理模式。它集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex使得应用中的状态变化变得简单且易于理解。它可以解决多个组件共享状态时的问题，并提供了一些工具来简化状态的更新和管理。简单来说就是可以在一个组件中保存和使用另一个组件获取的数据。

二、使用步骤

1.先安装vuex

在terminal中输入：npm i vuex --save/-S

npm install vuex --save

2.导入Vuex

在src文件下新建一个store文件夹，然后再在store文件夹下新建一个index.js文件，在index.js导入vuex：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

3.编写index.js

把vuex导入后，store文件夹中的index.js文件还要写一些方法，用来获取和保存数据

//公共satate对象，存储所有组件状态

const state={

    //可自行定义参数名字和类型（可定义多个），我用的是user用来保存登录用户的数据

    user:{

        phone:'',

        name:'',

        sex:'',

        identity:''

    }

}

//唯一取值的方法

const getters={

    getUser(state){

        return state.user;

    }

}

//唯一可以修改state值的方法，同步阻塞

const mutations={

    updateUser(state,user) {

        state.user=user;

    }

}

//异步调用mutations方法

const actions={

    asyncUpdateUser(context,user){

        context.commit('updateUser',user);

    }

}

//初始化一个store实例，一定要new的，将所有的方法暴露出去，就可以在其它组件使用了

export default new Vuex.Store({

    state,

    getters,

    mutations,

    actions

})

4.在组件中使用vuex保存和获取数据 

1.保存数据

this.$store.dispatch('asyncUpdateUser',data)

2.获取数据

 this.$store.getters.getUser

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vuex的使用，而vuex提供了可以使我们在组件中保存和获取数据的函数和方法。