vuex四种状态一个模块三种调用方法,数据持久化

最新推荐文章于 2022-10-09 18:24:08 发布

z-robot

最新推荐文章于 2022-10-09 18:24:08 发布

阅读量521

点赞数

分类专栏： vue 文章标签： vue vue.js javascript

本文链接：https://blog.youkuaiyun.com/z_robot/article/details/121630369

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细讲解了如何使用Vue和Vuex进行状态管理，包括创建store、mapState/mapMutations/mapActions以及数据持久化的方法。还介绍了actions传递多个参数和getters传入参数的实践技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础语法

import { createApp } from 'vue'
import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++ 
      // 改变状态里的变量值,只能通过这里改变 store.commit('increment')
    }
  },
  	actions: {}, // 异步调用改变
	getters: {}, // 派生出一些状态,简单理解就是通过这里方法筛选并返回新的值
})

const app = createApp({ /* 根组件 */ })

// 将 store 实例作为插件安装

main.js

app.use(store)

调用

直接调用法

 this.$store.getters.count;

mapStae

 computed: {
    ...mapState({
      cityName: (state) => state.cityName // function   映射 this.cityName 为 store.state.cityName的值
    })
  },

 computed: mapState({
      cityName:"cityName",// function   映射 this.cityName 为 store.state.cityName的值
    }),

  computed: mapState(["cityName"]),

 methods: {
            // vuex 在使用了 modules 模式时
            // mutation依然没有命名空间的概念 所以在定义 mutations 时要注意全局的唯一性
            // 否则后者会覆盖前者
            ...mapMutations(["setHasLogin", "setToken"]),
            // magic style1
            ...mapMutations(["setUserName", "setUserAge", "setOrderName"]),
            // magic style2
            ...mapMutations({
                setUserName(commit, userName) {
                    commit("setUserName", userName)
                },
                setUserAge(commit, userAge) {
                    commit("setUserAge", userAge)
                },
                setOrderName(commit, orderName) {
                    commit("setOrderName", orderName)
                }
            }),
            // 原生写法
            setUserName(userName) {
                this.$store.commit("setUserName", userName)
            },
            setUserAge(userAge) {
                this.$store.commit("setUserAge", userAge)
            },
            setOrderName(orderName) {
                this.$store.commit("setOrderName", orderName)
            }
        }
    }

https://blog.youkuaiyun.com/lxb_wyf/article/details/113694896?spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-14.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-14.no_search_link

vuex 数据持久化

const handleStore = async (store) => {
	let localStorage = window.localStorage;
	if (localStorage.store) {
		store.replaceState(JSON.parse(localStorage.store));
	} else {
		store.dispatch("acExchangeRate"); // 如果找不到数据就执行写入
	}
	store.subscribe((mutation, state) => {
		let oldState = JSON.parse(localStorage.getItem("store"));
		let store = oldState && oldState !== "" ? Object.assign(oldState, state) : state;
		localStorage.setItem("store", JSON.stringify(store));
	});
};
const store = createStore({
	plugins: [handleStore],
});

actions 传递多个参数

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state, [param1, param2, param3]) => {
      console.log(param1);
      console.log(param2);
      state.count++
    }
  },
  actions: {
    increment: ({ commit }, [param1, param2, param3]) {
      commit('increment', [param1, param2, param3])
    }
  }
})
 
// 调用
this.$store.commit('increment', [1, 2, 3]);

https://blog.youkuaiyun.com/hbwhypw/article/details/112577588

getters 传入参数

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

https://www.cnblogs.com/maogu2/p/14523605.html