vuex4的基本用法

VueX 是一个专门为 Vue.js 应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态。

Vuex五个核心概念：

state, getters, mutations, actions, modules

1. state：vuex的基本数据，用来存储变量

2. getter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(异步逻辑在action中写)

4. action：Action 提交的是 mutation，而不是直接变更状态；Action 可以任意异步操作。

5. modules：声明子模块，每一个子模块拥有自己的state、mutation、action、getters。

Vuex4的用法：

// 在 main.js 内
const store = createStore({
 state(){
  return{
   num:1,
  }
 },
 mutations:{
  addNum(state,args){
   state.num = args
  }
 },
 actions:{
   updateNum(context，args){
     context.commit('addNum',args)
   }
 },
 getters:{
  doubleNum(state){
   return state.num*2
  }
 },
 modules:{}
})

<template>
 <div>
  {{state.num}}
  <button @click="asyncUpdateNum">更新num</button>
 </div>
</template>
 
<script>
import { useStore } from "vuex"
export default {
 setup(){
  const store = useStore()
  return{
   state:store.state,
   asyncUpdateNum(){
   store.dispatch('updateNum',88)
   }
  }
 }
}
</script>