本文共 1924 字，大约阅读时间需要 6 分钟。

1.什么是vuex

vuex ：是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护

2.vuex由五部分组成

有五个属性分别是： state、getters、mutations、actions、module

• state属性： 存放状态，例如你要存放的数据
• getters： 类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据
• mutations： 唯一能改变state的状态就是通过提交mutations来改变，this.$store.commit()
• actions: 异步的mutations，可以通过dispatch来分发从而改变state
• moduels:store 的子模块，为了开发大型项目，方便状态管理而使用的

3.高级用法----数据持久化

vuex里面存放的数据，页面一经刷新会丢失：

解决办法： 存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；

在vuex中可以通过安装vuex-persistedstate 插件，进行持久化的配置就行

安装命令

cnpm install vuex-persistedState -S

-S 是–save的简写，意为：把插件安装到dependencies（生产环境依赖）中

-D是–save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中

4.高级用法-辅助函数（语法糖）

1. 有那几个辅助函数(4大金刚) mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的
3. 如何使用：Import { mapActions, mapGetters, mapMutations, mapState } from ‘vuex’

5.高级用法----模块化管理数据

什么时候需要用到模块管理vuex数据。

项目庞大，数据信息量特别大的时候，我们可以考虑分模块形式管理数据，比如user模块管理用户信息数据，cart模块管理购物车数据，shop模块管理商品信息数据。

import vue from 'vue'import Vuex from 'vuex'Vue.use(vuex);const state= ()=>{
    token:''}const actions = {
      set_token({
    commit},val){
        commit("to_token",val)  }}const mutations = {
      to_token(state,val){
       state.token=val;  }}const getters = {
   }//user模块let user = {
     namespaced: true, //一定要开始命名空间。  state: {
    userid: 1234 },  actions: {
     },  mutations: {
       SET_USERID(state, val) {
         state.userid = val;    }  },  getters: {
     }}//购物车数据的模块let cart = {
     namespaced: true,  state: {
    userid: 567 },  actions: {
     },  mutations: {
     },  getters: {
     }}const store = new Vuex.Store({
     state,  mutations,  actions,  getters,  modules: {
       user,    cart  },  plugins: [createPersistedState({
       storage: sessionStorage,    key: "token"  })]//会自动保存创建的状态。刷新还在})export default store

转载地址：https://blog.csdn.net/weixin_58102387/article/details/122849899 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！