数据持久化(数据持久化的四种方式)

 2021-11-22 14:59    77  

首先安装vuexnpm install vuex --save

其次项目中引入vueximport Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

第一种数据持久化:傻瓜式写法所有东西都集中在一个页面里,保证你一看就懂了,并且我写的的这么傻瓜。开始实例化配置let store = new Vuex.store({

//state是用来配置数据中心需要储存的数据

state: {

totalPrice: 0

},

//getters可以理解成对state里面的数据进行二次封装数据持久化,或者储存新数据

//或者可以理解成关于state的计算属性

getters: {

getTotal(state) {

return state.totalPrice

}

},

//mutations设置动作数据持久化,用来操作数据中心,但是只能同步,只有actions才可以异步操作数据

mutations: {

increment(state, price) {

state.totalPrice += price

}

},

//actions是mutations之前执行的动作,可异步操作一切相关交互后,通过调用mutations来修改数据中心

actions: {

increse(context, price) { //context固定,其相当于store

context.commit('increment', price)

}

}

})

//全局调用Vuex配置

new Vue({ store })

子组件操作状态管理在任何页面逻辑组件内、基础组件内都可以直接使用刚配置的totalPrice状态;由于刚刚配置的是全局,因此并不需要进行任何引入,多余的就都不写了,只写关键部分,只要去研究过vue的人,都看得懂。//自定义一个计算属性

computed: {

totalPrice() {

return this.$store.state.totalPrice //直接从state里去找

//当然还有第二种找法,从getters中去取数据,不用特地去state状态顶层

//return this.$store.getters.getTotal()

},

methods: {

addOne() {

//子组件操作mutations状态数据,但是mutations记住不能进行异步操作,只能同步

this.$store.commit('increment', this.price)

//当然还有第二种操作法,使用actions作为一个中介,有需要的话可以先异步后同步

//this.$store.dispatch('increase', this.price)

}

}

}

第二种:部分分离法如果说全部写在一个页面是傻瓜,那么后面在看过了vue-element-ui这个框架后,对vuex有了一种更深层次的理解,每个文件的引入和关联都紧密联系,只要“通道”正确。下面的例子是模拟一个后台登陆界面的账号密码提交,大家凭空想象吧~~保存账号密码采用js-cookie方式,安装方法:npm install js-cookie --save实例化配置store中的index.jsimport Vue from 'vue'

import Vuex from 'vuex'

import user from './user' //同级文件夹user.js

import getters from './getters' //同级文件夹下的getters.js

Vue.use(vuex)

const store new Vuex.Store({

modules: {

user

},

getters

})

export default store

getters.js中配置state的计算属性const getters = {

token: state => state.user.token //user映射的是index.js中modules的user配置

}

export default getters

单纯建立user.js,从java的角度相当于实体的get,set,定义字段类型的.java文件import { login } from '@/api/login'

import { getToken, setToken, removeToken} from '@/utils/auth'

const user = {

state: {

token: getToken() //进入网站前可以先从cookie中取值填充用户角色

},

mutations: {

SET_TOKEN: (state, token) => { //state固定

state.token = token

}

},

actions: {

Login({ commit }, userInfo) { //{commit, state}固定

const username = userInfo.username.trim()

return new Promise((resolve, reject) => { //登陆异步请求去后台查询用户

login(username, userInfo.password).then(response => {

const data = response.data

setToken(data.token) //请求成功,将当前用户存在cookie里

commit('SET_TOKEN', data.token) //将当前登陆用户保存在全网共同使用

resolve()

}).catch(error => {

reject(error)

})

})

}

}

}

api文件夹下login.js中登陆的异步请求export function login(username, password) {

return Promise.resolve({

data: { token: 'adminRole' }

})

}

utils文件夹下auth.js中保存cookie,得到cookie,删除cookie的工具类import Cookies from 'js-cookie'

const TokenKey = 'Admin-Token'

export function setToken(token) {

return Cookies.set(TokenKey, token)

}

export function getToken() {

return Cookies.get(TokenKey)

}

export function removeToken() {

return Cookies.remove(TokenKey)

}

逻辑页面methods: {

handleLogin() {

//触发actions定义的Login,一看就知道Login里面一定是执行了异步操作

this.$store.dispatch('Login', this.loginForm).then(() => {

this.$router.push('/')

}).catch(() => {

console.log('登陆失败')

})

}

}

第三种:完全分离法这是我最喜欢的一种,自从研究了全网音乐播放器后,深深的爱上了它,简直是方便的时候就引入vuex,不需要的时候,就当然是不引入啦;一直以来,按需加载的需求一直是我勇于追求的理念,前进的方向,直接上图上代码。同样是登陆界面,但这次用的是storage,安装方法:npm install good-storage --save文件夹示意图,清晰不糊涂,正~main.js入口实例化配置import store from './store'

new Vue({

el: '#app',

store,

render: h => h(App)

})

index.js实例化store(18-12-06日新增)import Vue from'vue'

import Vuex from 'vuex'

import * as actions from './actions'

import * as getters from './getters'

import state from './state'

import mutations from './mutations'

import createLogger from 'vuex/dist/logger' // 在控制台打印日志,以便更好的观察状态的变化

Vue.use(Vuex)

// 设置只有在开发环境的时候才打印日志

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({

actions,

getters,

state,

mutations,

strict: debug,

plugins: debug ? [createLogger()] : []

})

state.js配置“字段名”import { getToken } from '@/common/js/cache'

const state = {

token: getToken()

}

export default state

getters.js映射state数据export const token = state => state.token

mutation-types.js设置常量方法名export const SET_TOKEN = 'SET_TOKEN'

mutations就是一些方法,state代表state.js,第二个参数是传的形参import * as types from './mutation-types'

const mutations = {

[types.SET_TOKEN](state, token) {

state.token = token

}

}

export default mutations

actions异步操作import * as types from './mutation-types'

import {setToken, clearToken} from '@/common/js/cache'

export const Login= function ({ commit }, userInfo) {

const username = userInfo.username.trim()

return new Promise((resolve, reject) => {

login(username, userInfo.password).then(response => {

const data = response.data

setToken(data.token) //请求成功,将当前用户存在storage里

commit(types.SET_TOKEN, data.token) //将当前登陆用户保存在全网共同使用

resolve()

}).catch(error => {

reject(error)

})

})

}

//login跟第二种部分分离方法一样哦~不写了

关于storage的存取删import storage from 'good-storage'

const TokenKey = 'TokenKey'

export function getSearch() {

return storage.get(TokenKey, [])

}

export function clearToken() {

storage.remove(TokenKey)

return ''

}

export function setToken(token) {

storage.set(TokenKey, token)

return songs

}

页面逻辑//根据需求自行加入mapGetters, mapMutations, mapActions

import {mapGetters, mapMutations, mapActions} from 'vuex'

//mapGetters是配置计算属性,数组形式,顾名思义取的值来自getter.js

computed: {

..mapGetters([

'token'

])

}

//mapMutations,mapActions是配置在方法内作为方法调用

methods: {

//调用方法

handleLogin() {

this.Login(this.loginForm).then(() => {

this.$router.push('/')

}).catch(() => {

console.log('登陆失败')

})

},

//mapMutaions是json,方法名自定义

...mapMutations({

_setToken: 'SET_TOKEN'

}),

//mapActions是数组,方法名已经在actions.js中定义好了

...mapActions([

'Login'

])

}

好了以上就是数据化处理的大概

本文标签:处理状态

原文链接:https://www.xgfox.com/alpx/34817.html

本文版权:如无特别标注,本站文章均为原创。