直接使用全局对象的问题
-
全局对象里面的数据是普通的JavaScript数据类型,它们不是响应式的,也就说第一次读取渲染有可能没有问题,但是当数据修改过以后,界面没法作出对应的更新,这是一个很大的问题
-
全局对象的修改无法追踪,也就是说在应用中的任何一处代码,都可以有机会拿到全局数据,并作出对应的修改,但是我们根本没有办法搞清楚是哪行代码,哪个文件修改了全局数据,这样就非常容易产生bug,而且难以追踪,这就很危险了。
-
vue是组件化的世界,就像我们的程序,大家也可以发现,组件的构成就像一棵树一样,全局数据一般是从父组件一层层的传递给子组件的。直接从一个组件获取数据被视为一种反模式,这样很容易造成数据的混乱
状态管理三杰
-
Vuex
: https://vuex.vuejs.org/zh/guide/ -
Redux
: https://redux.js.org/ -
Mobx
: https://mobx.js.org/README.html
设计理念
-
一个类似object的全局数据结构 - 称之为store
-
只能调用特定的方法完成数据的修改
Vuex简介和安装
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同:
-
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
-
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
新版 Vuex 安装
npm install vuex@next --save
// 保证安装完毕的版本是 4.0.0 以上的
测试 Vuex store
import { createStore } from 'vuex'
// 从 vuex 导入 createStore 这个函数,我们发现 vue3 以后,这些第三方的官方库,名字出奇的相似,vue-router 也是以create 开头的,看起来非常的清楚。
const store = createStore({
state: {
count: 0
},
})
// createStore 接受一个对象作为参数,这些对象中包含了 vuex 的核型概念,第一个概念称之为 state,这里面包含的是我们想放入的在全局共享的数据,这里我们放入一个简单的 count。
// 现在我们已经可以直接访问这个值了,我们可以直接使用 store.state.count 来访问它。
console.log('store', store.state.count)
// 接下来我们来更改状态,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
mutations: {
add (state) {
state.count++
}
}
// 有了 mutations 以后,让我们来触发它,要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:
store.commit('add')
console.log('count', store.state.count)
Vuex 整合当前应用
定义 store 文件
import { createStore } from 'vuex'
import { testData, testPosts, ColumnProps, PostProps } from './testData'
interface UserProps {
isLogin: boolean;
name?: string;
id?: number;
}
export interface GlobalDataProps {
columns: ColumnProps[];
posts: PostProps[];
user: UserProps;
}
const store = createStore<GlobalDataProps>({
state: {
columns: testData,
posts: testPosts,
user: { isLogin: false }
},
mutations: {
login(state) {
state.user = { ...state.user, isLogin: true, name: 'viking' }
}
}
})
export default store
使用
import { useStore } from 'vuex'
import { GlobalDataProps } from '../store'
...
const store = useStore<GlobalDataProps>()
const list = computed(() => store.state.columns)
Vuex getters
vuex getters 文档 :https://vuex.vuejs.org/zh/guide/getters.html
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
getters: {
biggerColumnsLen(state) {
return state.columns.filter(c => c.id > 2).length
}
}
// 定义完毕,就可以在应用中使用这个 getter 了
// Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:
const biggerColumnsLen =computed(()=>store.getters.biggerColumnsLen)
getColumnById: (state) => (id: number) => {
return state.columns.find(c => c.id === id)
},
getPostsByCid: (state) => (id: number) => {
return state.posts.filter(post => post.columnId === id)
}
// 定义完毕以后就可以在应用中使用 getter 快速的拿到这两个值了
const column = computed(() => store.getters.getColumnById(currentId))
const list = computed(() => store.getters.getPostsByCid(currentId))
最后
--
> 公众号:小何成长,佛系更文,都是自己曾经踩过的坑或者是学到的东西
>
> 有兴趣的小伙伴欢迎关注我哦,我是:`何小玍`。大家一起进步鸭
>
> 最近有点忙,文章可能有点水,有问题大家可以关注我公众号,一起交流