vues3中vuex的简单使用的两种方式

前提： 安装了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