vuex-class

Posted 2021-02-21 zxuedong

vuex-class使用

 

1.store目录

 

 

2.store目录下的index.js

 

// index.js是所有模块注册文件

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

import user from ‘./model/user‘
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})




// module目录下的user.js


const user = {
  state: {
    checked: ‘你好vuex‘
  },

  mutations: {

    ADD_USER (state, msg) {
      console.log(msg)
    }
  },

  actions: {
  }
}

export default {

  // 表示允许  使用namespaced方法使用该模块，必须有
  namespaced: true,
  ...user
}

 

 

3.在组件中使用

// 组件中

// 首先安装vuex-class

npm i vuex-class

<script>

import { Vue, Component } from ‘vue-property-decorator‘

import {
  namespace
} from ‘vuex-class‘

// user是我们注册的模块user
const someModule = namespace(‘user‘)

@Component({

  components: {

  },

  filters: {
    time (value) {
      return 1
    }
  }

})

export default class MyComponent extends Vue {

   // 使用数据或者方法，State构造函数接受要使用的属性名
  @someModule.State(‘checked‘) checked

  @someModule.Mutation(‘ADD_USER‘) ADD_USER
    
    created () {

        console.log(this.checked)
        
        // 调用Mutation中的ADD_USER方法
        this.ADD_USER()
    }
    
}
</script>