vue-cli3 + ts + vuex

推荐使用vuex-class 官方介绍

npm install --save vuex-class
# or
yarn add vuex-class

本文也围绕着vuex-class进行介绍(目前我就会这一种)主要介绍取值和赋值使用方法说明如下:

store.ts中的写法:

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    setCount(state,value) {
      state.count = value
    }
  },

  actions: {

setCount(state,value) {

this.commit(‘setCount‘,value)

}

},

});
  

取值或赋值的写法:

import {Component, Vue} from ‘vue-property-decorator‘;
import {State, Action, Mutation} from ‘vuex-class‘;
@Component({})
export default class Main extends Vue {
    @State(‘count‘) stateCount: any
    @Mutation(‘setCount‘) setStateCount: any
    @Action(‘setCOunt‘) asyncSetStateCount: any
    created() {
        console.log(this.stateCount)  // 取值
        this.setCount({value:1})  // 同步赋值
        this.asyncSetStateCount({value:2})  //异步赋值
    }
}

原文地址:https://www.cnblogs.com/gionlee/p/12332380.html

时间: 2024-10-31 20:25:45

vue-cli3 + ts + vuex的相关文章

vue cli3 和 vue cli4

最近安装了vue cli4, 和vue cli3做下对比.我自己手动选择的配置, 安装了Router,Vuex 我安装的版本是@vue/cli 4.2.3 一.项目结构 左边为vue cli3, 右边为vue cli4 默认目录结构已更改 src/store.js 改为 src/store/index.js src/router.js 改为 src/router/index.js 二.babel.config.js文件 主要是 babel 的预设由@vue/app 改成了@vue/cli-plu

vue/cli3 配置vux

安装各插件 试过 安装"必须安装"的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --save 3.安装vux-loader[必须安装] npm install vux-loader --save-dev 4.安装less-loader(这个是用以正确编译less源码,否则会出现 ' Cannot GET / ')[必须安装] npm install less less-load

VUE CLI3.X 创建项目

Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多个Node版本 nvm github地址:https://github.com/nvm-sh/nvm Vue CLI 3.0环境搭建 卸载老版本vue-cli:npm uninstall vue-cli -g 安装新版本:npm install -g @vue/cli 原型开发:npm instal

学习vue必备技能vuex

首先我们先用vue-cli搭建项目,安装vuex,安装依赖(这里不一一讲解),然后在src下建立/vuex/store.js,里面代码截图 最简单的引入vue,引入vuex,定义两个对象,一个state(数据状态),一个mutations(改变数据方法),最后export,因为我们别的地方要用 ,比较简单的一个实例,也是比较经典的实例,点击加减改变state里面的值, 红色部分是比较麻烦一点的写法,但是比较容易理解,下面inport之后,我们直接在页面上显示和这个{{  }}类似, 然后comm

Vue状态管理vuex

转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new

Vue CLI3 开启gzip压缩

gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置:  压缩前后大小大致如下: 生成的压缩文件以.g

Vue CLI3 关闭热替换后出现的warning

用vue cli3做项目的时候如果开启了typescript的严格模式,在dev server热替换的时候往往就会打出一大堆warning,严重的影响了编译效率.官方并没有提供关闭warning的api,但是提供了修改webpack配置项的接口.通过这个接口我们就可以实现关闭warning. 根据文档webpack 相关 | Vue CLI 3 导出项目的配置为output.js,搜索check单词可发现一个插件:fork-ts-checker(github:Realytics/fork-ts-

vue cli3.0用axios调用本地json数据一直报404

最近在基于vue做后台管理系统时,用了vue cli3.0用axios调用本地json数据一直报404,市面上所有的解决办法都没用,快崩溃了,结果最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑. 最近发现好多人都踩这个坑,索性把我的结构发出来. 参考地址:https://www.love85g.com/?p=1500 原文地址:https://www.cnblogs.com/dapengFly/p/11359456.html

全局安装 Vue cli3 和 继续使用 Vue-cli2.x

官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它. Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推

Vue学习日记(四)——Vue状态管理vuex

前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰到下面这些问题: 当路由切换的时候,原本路由的数据太多,传递过去太麻烦. 有些数据是多个路由需要用到的,那我就需要从后台获取多次数据 当然,这些问题都可以解决,就是在实例化vue对象的时候,就将这些数据绑定在window对象上面.但是我们也不得不设想: 万一数据太多了,那么可阅读性是不是会下降 如果