简单了解一下vuex
是vue提供的一款store,用来存储页面共享数据
何时需要vuex
一般来说,数据分为两种方式
- 自有数据,即组件本身持有数据,表现即 data部分
- 外部数据,可由prop标签属性,inject父级注入,vuex提供。
组件本身自身持有数据内容,并不需要外部的参与的情况下,不需要外部数据。但是在一般来说,使用外部数据比较常见。 prop与父级紧密相关
使用inject注入时,无法有效追踪层级时,查找内容提供者容易出错,通常不建议跨多个层级使用
使用vuex好处
- 统一数据来源,方便查找 对标Provide/Inject
- 方便数据共享,对标Prop 子-父 传递数据
不方便的地方
暂时还没有发现,发现了再补充
使用vuex要考虑的地方
使用vuex的目的就是提高数据的复用性,但是不可以盲目使用vuex。
- 和组件自生无关的数据,可以放在store里。
- 在不同页面需要引用相同数据时,需要放在store里,以减少网络请求的次数。
- 单纯的父子传递数据,不一定要放在store里
基础内容
开打demo的store.ts 文件作为参照
export default new Vuex.Store({
state: { /* 状态库 */ },
mutations: { /* 同步计算库 使用commit触发 */ },
actions: { /* 异步计算库 使用dispatch触发 */ },
getters: { /* 计算属性 */ },
modules: { /* 分模块 */
test: {
namespaced: true, /* 开启module模式 */
state: {
foo: "this is foo"
},
getters: {
getFoo(state) {
return state.foo;
}
},
mutations: {
setFoo(state, foo) {
state.foo = foo;
}
},
actions: {
setFoo({ commit }, foo) {
setTimeout(() => {
commit('setFoo',foo)
}, 1e3);
}
}
}
}
})
复制代码
认识vuex的装饰器 vuex-class
import {
State,
Getter,
Action,
Mutation,
namespace
} from 'vuex-class'
复制代码
1. @namespace 命名空间
在我们开启module模式的时候,从模块下映射需要使用到namespace
除
State
外,其余可以行内书写方式直接引用,不需要引入namespace
namespace的两种使用方式
- 直接装饰器方式,可以简单使用
@Component
class MyComponent extends Vue{
@namespace('test').State foo!: string;
}
复制代码
- 引用装饰器方式,这种方式适合多个需要引用时简化书写namespace
const TestModule = namespace("test")
@Component
class MyComponent extends Vue{
@TestModule.State foo!: string;
}
复制代码
2. @State 状态映射
- 直接映射
@State foo
和@State("foo") foo
相同
@Component
class MyComponent extends Vue{
@namespace('test').State foo!: string;
}
复制代码
- 获取计算后的state
state映射到组件时,是放在computed下的,因此本身为计算属性。
@Component
class MyComponent extends Vue{
/* 只从 state 获取*/
@namespace('test').State(state=>state.foo) foo!: string;
/*从state和getters上获取*/
@namespace('test').State((state,getters)=>state.foo+'getter:'+getters.getFoo) svsgfoo!: string;
}
复制代码
- 内部使用namespace 如果不想在外部使用namespace,可以使用参数传递namespace
@Component
class MyComponent extends Vue{
@State("foo",{namespace:"test"}) foo!: string;
}
复制代码
3. @Getter 计算属性
和State类似,但是不支持再次计算。
@Component
class MyComponent extends Vue{
@Getter("test/getFoo") namefoo!:string;
@Getter("getFoo",{namespace:"test"}) foo!:string;
@namespace("test").Getter getFoo!:string;
}
复制代码
4. @Action 异步计算库
书写方式和Getter类似
@Component
class MyComponent extends Vue{
@Action("test/setFoo") setFoo!: Function;
}
复制代码
- action可以配合promise + async/await 一同使用
actions:{
async queryState({commit},token){
let result = await Axios.get("url",{data:{ token }})
commit('state',result.data)
return result.data
}
}
复制代码
@Component
class MyComponent extends Vue{
private token:string="best";
@Action queryState!: Function;
async onQueryStateClick(){
let data = await this.queryState(this.token)
// todo ...
}
}
复制代码
5. @Mutation 同步计算库
书写方式和Action类似
@Component
class MyComponent extends Vue{
@Action("test/setFoo") setFoo!: Function;
}
复制代码
但是mutation会立即返回结果,因此异步请求应该放在action中
更多内容 :vuex可以参照这里,vuex装饰器具体可参照 vuex-class