文章目录
前言
直接使用全局对象的问题
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