Vue3状态管理

---

一、Vuex4.x

vuex是vue做状态管理的，那vuex3.x和vuex4.x有什么改变呢？让我们来看看。

二、使用步骤

1.引入方式

代码如下（示例）：

import {createStore} from 'vuex'

2.state

代码如下（示例）：

//store文件
export default createStore({
  state: {
    name:'小明',
    age:18
  }
  )}

//组件使用
<template>
    <common-a></common-a>
  {{num}}
  {{name}}

</template>

<script setup>
import CommonA from '../components/CommonA.vue'
import {useStore} from 'vuex'
let store = useStore()
let num = computed(()=>store.state.age)
let name = computed(()=>store.state.name)
</script>

在这里如果我们直接使用store.state.age获取我们的状态，他拿到的是age这个实际的值，并不是响应式数据，我们需要使用computed计算属性来获取这个响应式数据， computed(()=>store.state.age)

---

2.getter

 getters: {
    addAge(state){
      console.log('addAge')
      return state.age + 10
    }
  },

3.mutations

mutations: {
    changeName(state,str){
      state.name= str
    },
    changeAge(state,val){
      state.age += val
    }
  },

4.actions

   actions: {
    changeAge(context,val){
      console.log(context)
      context.commit("changeAge",val)
    }

  },

5.组件使用

  <template>
    <common-a></common-a>
  {{num}}={{addAge}}{{addAge}}{{addAge}}{{addAge}}
  {{name}}
  <button @click="changeName">改名</button>
  <button @click="changeAge">改年龄</button>
</template>

<script setup>
import CommonA from '../components/CommonA.vue'
import {useStore} from 'vuex'
let store = useStore()
let num = computed(()=>store.state.age)
let name = computed(()=>store.state.name)
let addAge = store.getters.addAge
console.log(store)
const changeName = ()=>{
  store.commit("changeName","小红")
}
const changeAge = ()=>{
  store.dispatch("changeAge",1)
}
</script>

<style scoped lang="less">
</style>

getters，mutations，actions的使用和vue3.x没有太大区别

---

三、Vuex持久化存储

1.本地存储

2.使用插件

2.1下载插件

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

2.2配置使用插件

import Vuex from "vuex";
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
    state,
    mutations,
    actions,
    /* vuex数据持久化配置 */
    plugins: [
        createPersistedState({
            // 存储方式：localStorage、sessionStorage、cookies
            storage: window.sessionStorage,
            // 存储的 key 的key值
            key: "store",
            render(state) {
            // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
                return { ...state };
            }
        })
    ]
});

export default store;

总结

vuex4在使用上和之前没有太大区别，增加了一些API。
链接学习：
https://vuex.vuejs.org/api/