vuex知识点总结

1. 什么是vuex

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。

• Vuex 是单向数据流的一种实现。
  以下是一个表示“单向数据流”理念的简单示意
  

• vuex它由五部分组成

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

• Vuex 的完整流程
  组件中触发 Action，Action 提交 Mutations，Mutations 修改 State。 组件根据 State 或 Getters 来渲染页面。
  

高级用法----- 数据持久化插件

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

最简单的做法就是利用插件 vuex-persistedstate。
安装
cnpm安装
cnpm install vuex-persistedstate -s
yarn安装
yarn add vuex-persistedstate -s
备注：

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

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,//storage:存储方式：（sessionStorage,localStarage）
    key: "token"//key:定义本地存储中的key
  })]//会自动保存创建的状态。刷新还在
})

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

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

2. 辅助函数可以把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>

标签：总结,知识点,...,state,token,mapActions,mapMutations,vuex
来源： https://blog.csdn.net/m0_48949881/article/details/122355436