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', '传过去的新属性')
  }
}