一、前言

Vuex是做什么的？

Vue官方：状态管理工具

状态管理是什么?

需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。

例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等

这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。

vuex内部结构如下：

//创建store对象并导出store
import { createStore } from "vuex";
export default createStore({
  // 存放数据
  state: {
    boy: 185,
    girl: 432,
    text: "vuex仓库",
  },
  // 类似计算属性
  getters: {
    // 默认参数可获取state中所有数据,必须有返回值,依赖值发生改变会重新计算
    getSum(state) {
      return state.boy + state.girl;
    },
  },
  // 修改state中的属性
  mutations: {
    // 默认参数可获取state中所有数据，第二参数为页面传入数据
    godownChange(state, ele) {
      // 通过事件可对state内任意数据进行修改
      state.boy = ele;
    },
  },
  // 异步操作
  actions: {},
  // 模块化
  modules: {},
});

二、vuex的使用

• 在页面中使用vuex的数据可通过store.state.属性名或store.getters.方法名获取
• 在页面中不能直接修改vuex的数据，必须通过vuex中的store.commit（）发送事件至vuex修改

页面获取vuex仓库的数据

<template>
  <div class="box">
    {{ cont }}{{ num }}
  </div>
</template>
<script setup>
// 引入
import { reactive, toRefs } from 'vue';
import { useStore } from 'vuex'; //引入useStore 方法
const store = useStore() // 该方法用于返回store实例
const data = reactive({
  cont: '',
  num:0
})
//通过store.state.属性名获取vuex数据
data.cont = store.state.text
//通过store.getters.方法名获取vuex数据
data.num = store.getters.getSum
// 解构数据
const { cont,num } = toRefs(data)
</script>
<style scoped lang="scss"></style>

修改vuex的数据

<template>
  <div class="box">
    <button @click="storeChange">修改vuex</button>
  </div>
</template>
<script setup>
// 引入
import { reactive, toRefs } from 'vue';
import { useStore } from 'vuex'; //引入useStore 方法
const store = useStore() // 该方法用于返回store实例
const data = reactive({
  num: 100,
})
function storeChange() {
  // 第一个参数为传递的事件名，第二个参数为页面传入数据
  // 第二个参数页面传入数据为可选项，没有参数可以忽略
  store.commit('godownChange', data.num)
}
// 解构数据
const { cont, num } = toRefs(data)
</script>
<style scoped lang="scss"></style>

三、vuex持久化存储

下载命令

npm install --save vuex-persistedstate

store.js使用

import { createStore } from "vuex";
// 引入 persistedstate 组件
import createPersistedState from 'vuex-persistedstate'
export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
  // 在store对象内创建plugins: [createPersistedState()]
  plugins:[createPersistedState()]
});

• 有以下数据，表示引入持久化成功