vuex-class

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>