一文彻底搞懂vuex-蒲公英云

一文彻底搞懂vuex

野性酷女 2023-01-02 02:18 382阅读 0赞

1. 什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：
分别是：state,actions,mutations,getters,modules

2. vuex由五部分组成

state: 数据
actions:可以包含异步操作
mutations: 唯一可以修改state数据的场所
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

3. 如何使用

store—>index.js

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 = { }
let store = new Vuex.store({ 
 state,
 actions,
 mutations,
 getters
})
module.export=store;

home.vue

<template>
  <div>
    { { $store.state.token}}
  </div>
</template>
<script>
export default={ 
 name: 'Home',
  data() { 
    return { 
      tel: '',
          }
  },
  created(){ 
    //调用acionts中的方法
    this.$store.dispatch('set_token',12345);
    //调用mutations中的方法
    this.$store.commit('to_token',123456)
  }
}
<script>

4. 高级用法——- 数据持久化

问题：存储在vuex中的状态，刷新页面，会丢失。
为了解决刷新页面数据丢失，才有了数据持久化。

最简单的做法就是利用插件 vuex-persistedState。
1. 安装
cnpm install vuex-persistedState -S
备注：

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

2. 使用

import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({ 
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({ 
    storage: sessionStorage,
    key: "token"
  })]//会自动保存创建的状态。刷新还在
})

参数：

storage:存储方式。（sessionStorage,localStarage） key:定义本地存储中的key

5. 高级语法—— 模块化管理数据（modules）

1. 什么时候需要用到模块管理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

home.vue如何使用

获取user模块的`userid`
this.$store.state.user.userid
this.$store.commit("SET_USERID",12345)

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

1. 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters

辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

3. 如何使用

home.vue

<template>
 <div id="">
   { {  token }}
   { {  token - x }}
 </div>
</template>
<script>
import {  mapActions, mapGetters, mapMutations, mapState } from 'vuex'
import { createNamespacedHelpers} from 'vuex'
const { mapState:mapStateUser,mapActions:mapActionUser,mapMutations:mapMutaionuser} = createNamespacedHelpers('user')
const { mapState:mapStateCart,mapActions:mapActionCart,mapMutations:mapMutaionCart} = createNamespacedHelpers('cart')
export default { 
 name: '',
 data() { 
   return { }
 },
 computed: { 
   ...mapState({ 
     token: 'token'
   }),
   ...mapGetters(['token-x']),
   ...mapSateUser(['userid']),
   ...mapStateCart({ cartid:'userid'})
 },
 //生命周期 - 创建完成（访问当前this实例）
 created() { 
   this.setToken('123456')
 },
 //生命周期 - 挂载完成（访问DOM元素）
 mounted() { },
 methods: { 
   ...mapActions({ 
     setToken: 'setToken'
   }),
   ...mapMutations(['SET_TOKEN']),
   ...mapMutaionUser({ 
   setId:"setToken"
  })
 }
}
</script>