在vue3中使用vuex

下载

npm install vuex -S

-S：save，包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。

-D：dev，仅在生产模式下使用。

创建vuex文件

src根目录下创建store文件夹，在里面的index.js里书写：

import {createStore} from 'vuex'

export default createStore({
  state:{
    isCollapse:true
  },

  mutations:{
    updateIsCollapse(state,payload){
      state.isCollapse=!state.isCollapse
    }
  }
})

注册和引入vuex

在main.js里面

// 引入vuex
import store from './store/index.js'

// 注册
createApp(App).use(store)

使用vuex

<script>
// vue3中使用要先引入
import { useStore } from "vuex";

export default {
  setup() {
    // 引入之后最好先声明个store接收一下
    const store = useStore()
    const handleCollapse = () => {
      store.commit('updateIsCollapse')
    };
    return { handleCollapse };
  }
};

</script>