vue系列之---vue3.0 Vuex

1.下载vuex

npm i vuex@next

2.在util文件夹中新建Storagehandle .js文件（防止刷新后数据丢失）

const lsa = window.localStorage
export default {
    getItem(key) {
      try {
        return JSON.parse(lsa.getItem(key))
      } catch (err) {
        return null
      }
    },
    setItem(key, val) {
      lsa.setItem(key, JSON.stringify(val))
    },
    clear() {
      lsa.clear()
    },
    keys() {
      return lsa.keys()
    },
    removeItem(key) {
      lsa.removeItem(key)
    }
  }

3.新建store文件夹并建index.js文件

import {createStore } from 'vuex'
import Storage from '@/uitl/Storagehandle'
export default createStore({
 state = {
    //校验token
    token: Storage.getItem("token")||"",
    //用户信息
    userData: Storage.getItem("userData") || {}
 },
 mutations ={
    //赋值token
    tokenFix (state, token) { 
        Storage.setItem(`token`, token)
        state.token = token
    },
    //赋值用户信息
    userDataFix (state, userData) { 
        Storage.setItem(`userData`, userData)
        state.userData = userData
    },
  },
  actions = {
    //提交修token
    updatetoken (context,value) { 
        context.commit('token',value)
    },
    //提交修改用户信息
    updateuserData (context,value) { 
        context.commit('userData',value)
    }
  },
  modules:{}
})

4.在main.js中引入store文件

import {createApp} from 'vue'
import store from './store'
import App from './App.vue'

const app = createApp(App)
app.use(store)

5.在页面中使用

存储

import $store from '../../store/index.js'
$store.dispatch('updatetoken ', '132453456787634243' )
$store.dispatch('updateuserData ', {userName: 'hyduan'} )

获取

import {mapState} from 'vuex'
computed: {
  ...mapState({token:state => state.token, userData: state => state.userData })
}

vuex模块化

推荐链接

vue2.0中vuex封装

推荐链接