Vuex最簡單的使用方法

一、安裝Vuex

安裝命令：

npm install vuex --save

二、新建store.js文件

文件內容如下：

import Vue from 'vue';// 引入vue
import Vuex from 'vuex';// 引入vuex
Vue.use(Vuex); // 使用vuex插件

// Store實例
export default new Vuex.Store({
  
  // vuex的數據,類似組件裏的data
  state: {
    name: 'abc'
  },

  // 通過actions的commit觸發mutations來修改state的數據
  actions: {
    // 第一個參數是用於觸發mutations，第二個參數是使用的地方傳過來的數據
    nameAction({ commit }, data) {
      //可以是ajax等異步操作
      commit('newName', data);
    }
  },

  // 同步修改state裏面的數據
  mutations: {
    // 第一個參數是上面的state數據,第二個參數是commit傳過來的數據,用以修改state數據。
    newName(state, data) {
      state.name = data; // 更改state的數據
    }
  }
});

三、引入Vuex

在main.js文件中引入Vuex：

import store from './store'; // 引入store

四、使用Vuex

export default {
  mounted(){
      console.log('vuex的數據'，this.$store.state.name)
  }
  methods:{
    editName () {
      // commit只接受一個參數，數據多就用對象傳遞
      this.$store.dispatch('nameAction', '傳過去的新屬性')
  }
}