前提: 安装了vuex
第一种:都写在store/index.js文件中
1、store/index.js如下代码:
import { createStore } from 'vuex'
export default createStore({
state () {
return {
count: 0,
sum:0
}
},
getters:{
total(state){
return state.count + state.sum
}
},
mutations: {
increment (state,val) {
state.count = val
}
},
actions: {
changeBtn(state, val){
state.sum = val
}
}
})
2、vue3页面使用
import { useStore } from 'vuex'
let store = useStore()
let str = computed(()=>{ store.state.count }) // 获取 state中值 响应值
let alS = computed(()=>{store.getters.total}) // 获取 getters中值 响应值
const btn = ()=>{
// store.commit('increment', 100) // mutations 更新使用
store.dispatch('changeBtn', 200) // actions 更新使用
}
==========================================================================================================================================================
第二种:分模块写法
1、 store/index.js如下代码:
import { createStore } from 'vuex'
import user from './modules/home.js'
export default createStore({
modules:{
home
}
})
2、 store/modules/home.js 代码如下
export default {
state: {
navList:'list'
},
}
3、 页面使用
import { useStore } from 'vuex'
let store = useStore()
let str = computed(()=>{ store.state.home.navList}) // 获取 home中state中值 响应值
备注:vuex的持久化存储可使用sessionStorage或者localStorage或者是插件vue-persistedstate