vuex状态管理模式

mac2025-01-05  13

一、安装

npm install vuex --save

二、使用

import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex)

三、核心概念

1.state(vuex中的数据源,存放所有数据)--------login.js

const state ={ countser:null //登陆id }

2.getter(相当于vue中的computed计算属性,用来监听state中值的变化)

3.mutation(修改值,更改vuex的store中的状态的唯一方法就是提交 mutations。只能是同步操作)--------login.js

mutations 上存放的一般就是我们要改变 state 的一些方法。不能直接调用,调用时需要store.commit方法

const mutations ={ //登陆id increment(state,n){ state.countser=n } }

4.action(action提交的是mutation,而不是直接更改状态。可以是异步操作)--------login.js

mutation 像事件注册,需要相应的触发条件。而 Action 就那个管理触发条件的。

const actions ={ //登陆id increment(context,args){ //context是和store具有相同方法和属性的一个对象 context.commit('increment',args); //increment就是Mutation里的方法名 }, }

5.moudel(将 store 分割成模块module。每个模块拥有自己的 state、mutation、action、getter)

6.命名空间(在index.js最终导出时,可以去给对应的模块命名方便使用)--------login.js

export default { namespaced: true, //vuex命名空间 }

注:最后导出--------login.js

export default { //导出 namespaced: true, //vuex命名空间 state, actions, mutations }

7.vuex持续化--------index.js

vuex保存的数据在页面刷新、窗口关闭等情况下会被清除,所以用vuex持续化来解决这个问题,这样它的数据就不会被清除了。

①安装

npm install vuex-persistedstate --save

②导入---------index.js

import createPersistedState from "vuex-persistedstate" //vuex 持续化

③实例化时添加

plugins: [ createPersistedState({ storage: { getItem: key => wx.getStorageSync(key), setItem: (key, value) => wx.setStorageSync(key, value), removeItem: key => () => {} } }) ] 或者 conststore = newVuex.Store({   plugins: [createPersistedState({   storage:window.sessionStorage,       reducer(val)  {           return {               assessmentData: val.assessmentData           }       }   })]

例子:

import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" //vuex 持续化 Vue.use(Vuex) import loginuser from './modules/login' //导入模块 export default new Vuex.Store({ plugins: [createPersistedState({ storage: window.localStorage, //数据存储位置 reducer(val) { return { loginuser:{ //选择指定模块数据存储 countser:val.loginuser.countser } } } })], // 导出 store 对象 modules:{ loginuser:loginuser } })

mutation 就像事件类型,需要给定某个动作来进行触发,这就是分发 action。Action 通过 store.dispatch 方法触发。

注:存储

this.$store.dispatch('loginuser/increment',res.data.id);

注:当vuex存的值发生变化时,取值的地方可以直接响应为新的值。但是local storage和session storage不能响应。

local storage---永久保存        session storage----临时保存(浏览器关闭或刷新时会丢失)

最新回复(0)