当前位置：首页 > news >正文

vuex 和持久化 vuex-persistedstate

news 2025/7/7 12:13:33

1.store文件下index.js

import { createStore } from 'vuex'
import api from '../api/index.js'
import axios from "../utils/request.js";
import path from "../api/path.js";
import cityModule from './cityModule.js';export default createStore({state: {counter: 10},getters: {//获取方法getCounter(state) {return state.counter > 0 ? state.counter : 'counter小于数据等于0';}},mutations: {//修改方法addCounter(state, num) {state.counter = num;}},actions: {//actions 可以异步操作   同步操作用mutationsasycnAddCounter({ commit }, num) {console.log('actions:内方法获取到参数:', num);axios.post(path.gen_list, { user: "iii" }).then(res => {commit("addCounter", res.data[0])})}},modules: {cityModule,}
})

2.cityModule.js

const cityModule = {namespaced: true,//分模块命名//子模块state建议写成函数state: () => {return {cityName: '石家庄'}},mutations: {changeCity(state, name) {state.cityName = name;}},actions: {changeCityAsync({ commit }, name) {setTimeout(() => {commit("changeCity", name)}, 200)}},getters: {// getters  是属性不是方法getCity(state) {return state.cityName+'欢迎您';}}}
export default cityModule

3.hellow.vue

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><h3>Home</h3><p>counter={{ $store.getters.getCounter }}</p><!-- 快捷读取方案 --><!-- <p>counter={{ getCounter }}</p> --><button @click="add">vuex mutations 增加counter值</button><button @click="asyncClick">vuex aciton 异步修改数据</button><p>city={{ $store.state.cityModule.cityName }}</p><p>city={{ $store.getters["cityModule/getCity"] }}</p><p><button @click="updataCity">修改城市名称</button></p><p><button @click="AsyncUpdataCity">修改城市名称</button></p><HelloWorld msg="Welcome to Your Vue.js App" /></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'import { mapGetters, mapMutations, mapActions } from 'vuex'  //1.引用import { ref } from 'vue'
import { useStore } from 'vuex'export default {name: 'HomeView',// vue3setup(props) {const store = useStore();console.log('vue3-state', store.state.counter)// console.log('vue3-getters', store.getters.getCounter())const add = () => {store.commit("addCounter", 20);}const asyncClick = () => {store.dispatch("asycnAddCounter", 110);}const updataCity = () => {store.commit("cityModule/changeCity", "正定")}const AsyncUpdataCity = () => {store.dispatch("cityModule/changeCityAsync", "Async正定")}return { add, asyncClick, updataCity, AsyncUpdataCity }},//vue2 写法// components: {//   HelloWorld// },// computed: {//2.获取值//   ...mapGetters(["getCounter"])// },// methods: {//   ...mapMutations(["addCounter"]),//2.修改至//   ...mapActions(["asycnAddCounter"]),//   add() {//     // this.$store.commit("addCounter",15);//固定调取方法方式//     this.addCounter(25);//...mapMutations(["addCounter"]), 快速读取//   },//   asyncClick() {//     // this.$store.dispatch("asycnAddCounter");//固定调取方法方式//     this.asycnAddCounter();//   }// }
}
</script>

4.cnpm install vuex-persistedstate -S 首先安装
然后修改我们的index.js
注意数据存储必须得触发之后才会存储

import { createStore } from 'vuex'
import api from '../api/index.js'
import axios from "../utils/request.js";
import path from "../api/path.js";
import cityModule from './cityModule.js';import createPersistedstate from 'vuex-persistedstate'//1.首先引入export default createStore({//2.pluginsplugins: [createPersistedstate({key:'info',paths:['cityModule']//需要持久化 哪个模块})],state: {counter: 10},getters: {//获取方法getCounter(state) {return state.counter > 0 ? state.counter : 'counter小于数据等于0';}},mutations: {//修改方法addCounter(state, num) {state.counter = num;}},actions: {//actions 可以异步操作   同步操作用mutationsasycnAddCounter({ commit }, num) {console.log('actions:内方法获取到参数:', num);axios.post(path.gen_list, { user: "iii" }).then(res => {commit("addCounter", res.data[0])})}},modules: {cityModule,}
})

最后编辑于：2025-06-15 10:00:35