前言

直接使用全局对象的问题

1、全局对象的数据时普通的js数据类型，不是响应式的。即全局对象数据被修改了，界面也没法做出对应的更新。

2、全局对象的修改无法追踪，也就是说应用中的任何一处代码，都有机会拿到全局数据，并做出对应的修改。因此呢，很难搞清楚是哪个文件哪行代码修改了全局数据，造成bug难以追踪。

3、vue是组件化的，组件的构成就像一棵树，全局数据一般从父组件一层层传递给子组件。直接从一个组件获取数据被视为一种反模式，这样很容易造成数据混乱。

因此，需要一个状态管理工具。

状态管理三杰：vuex、redux、mobx

以下以vuex为例

一、设计理念

一个类似object的全局数据结构——称之为store
只能调用特定的方法完成数据的修改

二、安装和使用

1、安装npm install vuex --save

2、新建一个store.ts文件

扫描二维码关注公众号，回复： 17274057 查看本文章

import {
    
     createStore } from 'vuex'
export interface GlobalDataProps {
    
    
   count: number;
   columns:{
    
     currentPage: number; total: number };
}
const store = createStore<GlobalDataProps>({
    
    
  state: {
    
    
    count： 0
  },
  mutations: {
    
    
    counter(state: any) {
    
    
      state.count += 1;
    }
  },
  actions: {
    
    },
  getters: {
    
    
    getColumnsTotal: (state) => {
    
    
      return state.columns.total
    },
  }
})

export default store

3、在main.ts中引入

import {
    
     createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

4、在组件中使用

<script lang="ts">
import {
    
     defineComponent, reactive, ref } from 'vue'
import {
    
     useStore } from 'vuex'
export default defineComponent({
    
    
  name: 'Login.vue',
  components: {
    
    },
  setup () {
    
    
    const store = useStore()
    const onFormSubmit = (result: boolean) => {
    
    
      if (result) {
    
    
        store.commit('counter') // 调用commit修改count数据，使用store.dispatch('XXXX')调用action里面的方法
        console.log(store, useStore)
      }
    }
    // 在 computed 函数中访问 state
    const list1 = computed(() => store.getters.getColumns)
    const count = computed(() => store.state.count)
    return {
    
    
      onFormSubmit,
      list1,
      count
    }
  }
})
</script>

注意：const store = useStore()不能写在setup函数中的函数里面，不然store的值打印出来是undefined。

可以通过调用 useStore 函数，来在 setup 钩子函数中访问 store。这与在组件中使用选项式 API 访问 this.$store 是等效的。

总结

官网链接vuex