【vuex+vue-cli】vue-cli項目中vuex的使用

操作步驟

1. 在src目錄中創建文件夾 vuex,並創建如下文件.

• vuex/index store實例

import Vue from 'vue';
import Vuex from 'vuex'; // 引入對應模塊
import status from './moudules/status/index';//引入vue模塊

Vue.use(Vuex);//安裝Vue插件 vuex

export default new Vuex.Store({
  modules:{ //將 store 分割成模塊
    status
  }
});//導出vuex實例

• vuex/moudule/status/index vuex模塊,每個模塊有自己的 state,getters,actions,mutations

import actions from './actions';
import mutations from './mutations';
import getters from './getters';
import state from './state';

export default {
  namespaced: true, //命名空間,自動根據模塊註冊的路徑調整命名
  state,
  getters,
  actions,
  mutations
};

• state.js vuex state

export default {
  count: 0
}

• getter.js

export default {
  /*getters可以幫我們從state中進一步過濾我們需要的一些狀態條件*/

  getCount: (state) => {
    return state.count;
  }
}

• mutation_type.js 命名變量

//這個js文件裏面只是一些變量，把action和mutation文件裏面相同變量名的鏈接起來
export const VUEX_TEST = 'increment';
// 一般使用的是大寫來命名變量，因爲尤大也是這麼做 2333

• actions.js

    import * as types from './mutation_type';
    export default {
      addCount({commit}){
        commit(types.VUEX_TEST);
      }
    };

• mutations.js

import * as types from './mutation_type';//引入變量
export default {
  //types.VUEX_TEST 代表接受哪個actions的commit 也就是上面引入變量的作用
  [types.VUEX_TEST](state){
    state.count++
  }
};

使用

• main.js

import Vue from 'vue'
import App from './App'
import MintUI from 'mint-ui'
import router from './router'
import store from  './vuex';//引入文件

Vue.config.productionTip = false;//設置爲 false 以阻止 vue 在啓動時生成生產提示。
Vue.use(MintUI);

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

• components

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
        <p>{{getCount}}</p>
        <mt-button type="primary" v-on:click="add">add</mt-button>
    </div>
    <router-view/>
  </div>
</template>

<script>
import axios from "axios";
import { mapGetters, mapActions, mapState } from "vuex";

export default {
  name: "App",
  data: ()=> {
    return {
      selected: 1
    };
  },
  watch: {
    selected: function(val) {
      console.log(val);
    }
  },
  computed:{
   ...mapGetters({
      'getCount': 'status/getCount'
   })
  },
  mounted:function(){
    console.log(this.$store.state.status.count)
  },
  methods:{
    add(){
      console.log(this.$store.dispatch('status/addCount'));
    }
  }
};
</script>