Vue3.0使用Vuex

一.安装Vuex包

//默认不写版本是三点多的版本
npm install vuex@4.0.0

//卸载vuex
npm uninstall vuex

二.在src目录下创建store文件

三.index.ts写入代码

import { createStore } from 'vuex'
const store = createStore({
  state: {
    IsLogin: false,
  },
  mutations: {}
});
export default store;

四.main.ts导入use

import { createApp } from 'vue'
import App from './App.vue'
/* router引入 */
import router from './router'

/* Vuex引入 */
import stores from './store/index'

/* css样式 */
import '@/style/css/variable.css'

// 导入SvgIcon组件
import SvgIcon from '@/components/SvgIcon/index.vue'
const req = require.context('@/icons/svg', false, /\.svg$/)
req.keys().map(req)
// 创建全局组件，以便任何地方使用

createApp(App).use(stores).component('svg-icon', SvgIcon).use(router).mount('#app')

五.使用

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>{{ state.IsLogin }}</h1>
    <div class="svg_Error">
      <svg-icon icon-class="Error" class="Error" />
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const state = ref(store.state);
    console.log(state);
    
    return { state };
  },
});
</script>