[Vuex] Create a Vuex Store using TypeScript
A Vuex store centralizes the state of your app, making it easy to reason about your state flow.
In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the @State
decorator from Vuex Class
Install:
npm i vuex vuex-class --save
Create store folder and index.ts, todos.ts file:
//store/index.ts import Vue from 'vue';
import Vuex from 'vuex'; import todos from './todos'; Vue.use(Vuex); export default new Vuex.Store({
state: {
...todos,
},
mutations: { },
actions: { },
}); // store/todos.ts
import {State} from '../types'; const state: State = {
todos: [
{text: 'Buy milk'},
],
}; export default state;
Define the State interface:
// types.ts export interface Todo {
text: string;
} export interface State {
todos: Todo[];
}
Using Store in main.ts:
import './hooks'; import Vue from 'vue';
import App from './App.vue';
import router from '@/router';
import store from '@/store/index';
import '@/registerServiceWorker';
Vue.config.productionTip = false; new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
Create a Todos.vue component:
<template>
<ul>
<li v-for="todo in todos">{{ todo.text }}</li>
</ul>
</template> <script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {State} from 'vuex-class';
import {Todo} from '../types'; @Component({
})
export default class Todos extends Vue {
@State todos: Todo[]
}
</script>
[Vuex] Create a Vuex Store using TypeScript的更多相关文章
- vuex中的this.$store.commit
Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...
- vuex教程,vuex使用介绍案例
1.demopageaction: import Vue from "vue"; import Store from "../../store.js"; imp ...
- 手摸手教你在vue-cli里面使用vuex,以及vuex简介
写在前面: 这篇文章是在vue-cli里面使用vuex的一个极简demo,附带一些vuex的简单介绍.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人 ...
- vuex基础(vuex基本结构与调用)
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const modulesA = { state:{//状态 count: ...
- Vuex 页面刷新后store保存的数据会丢失 取cookie值
在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...
- vuex应用实例-this.$store.commit()触发
新建文件夹store,store下: action.js const actions = {} export default actions; getter.js const getters = {} ...
- VUEX报错 [vuex] Do not mutate vuex store state outside mutation handlers
数组 错误的写法:let listData= state.playList; // 数组深拷贝,VUEX就报错 正确的写法:let listDate= state.playList.slice(); ...
- vuex介绍和vuex数据传输流程
1.什么是vuex? 公共状态管理:解决多个非父子组件传值麻烦的问题:简单说就是多个页面都能用Vuex中store公共的数据 a.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在V ...
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...
随机推荐
- word,excel,ppt在线预览功能
我们在开发web项目时,尤其类似oa功能时总会遇到上传附件并在线预览的功能,发现一款api比较好使,下面简单介绍一下. 微软官网本身提供了在线预览的API 首先将要预览的文档转成.docx,.xlsx ...
- 【JavaScript】对象
No1: typeof操作符获取对象的类型 null的类型是object,Array的类型也是object,如果我们用typeof将无法区分出null.Array和通常意义上的object——{}. ...
- Certbot让网站拥有免费https证书
网站使用http协议,在chrome浏览器中总是报不安全,看着就让人不爽,自己建的网站,不安全总是会让自己心慌慌.看到有头有脸的网站都是https开头,心中自然也想装逼一把,让自己的网站高端大气上档次 ...
- node.js监听文件变化
前言 随着前端技术的飞速发展,前端开发也从原始的刀耕火种,向着工程化效率化的方向发展.在各种开发框架之外,打包编译等技术也是层出不穷,开发体验也是越来越好.例如HMR,让我们的更新可以即时可见,告别了 ...
- Looping through the content of a file in Bash
https://stackoverflow.com/questions/1521462/looping-through-the-content-of-a-file-in-bash One way to ...
- 页面嵌入iframe那些事儿
一.用iframe如何把别人的页面嵌入自己的页面? <iframe src="http://blog.sina.com.cn/abc" frameBorder=0 scrol ...
- OSPF补全计划-0 preface
哇靠,一看日历吓了我一跳,我这一个月都没写任何东西,好吧,事情的确多了点儿,同事离职,我需要处理很多untechnical的东西,弄得我很烦,中间学的一点小东西(关于Linux的)也没往这里记,但是我 ...
- MySQL firstmatch strategy
在探讨subquery如 x IN (SELECT XX FROM TABLE)这样的形式的MATCH策略时,不是很清楚实现过程.在网上搜了一下, 地址:http://stackoverflow.co ...
- php 将16进制数串转换为二进制数据的函数
/** * 将16进制数串转换为二进制数据的函数 * @param $hexdata * @return string bindata */ function ...
- BZOJ5101 : [POI2018]Powód
求出Kruskal重构树,那么重构树上每个点的取值范围是定的. 考虑树形DP,则对于一个点,要么所有点水位相同,要么还未发生合并. 故$dp[x]=up[x]-down[x]+1+dp[l[x]]\t ...