vue-cli3 + ts + vuex

Posted gionlee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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})  //异步赋值
    }
}

 

以上是关于vue-cli3 + ts + vuex的主要内容,如果未能解决你的问题,请参考以下文章

vue+ts搭建项目

vue-cli中使用vuex

vue-cli+webpack+router+vuex---之vuex使用

在 vue-cli 3 项目中使用带有 npm-link 的 vuex store 会丢失 $store

如何在 Vue 3 s-s-r 应用程序的路由器中使用 vuex 商店?

vue-cli 初始化创建 vue2.9.6 项目路由守卫封装axiosvuex