Vuex的使用

初始化vue项目

安装Vuex

npm install vuex --save

初始化Vuex

在项目根目录下的src目录下创建vuex文件夹，用于存放vuex相关文件，并新建index.js用于编写相关代码

创建Vuex实例,并向外暴露

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
   
  // 用于存放状态（数据）
  state: {
   

  },
  // 用于处理state中的状态（相当于vue中的计算属性）
  getter: {
   

  },
  // 用于存放同步方法
  mutations: {
   

  },
  // 用于存放异步方法
  actions: {
   

  }

})
export default store

在main.js中引入Vuex实例,并挂载在Vue实例上

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/index.js'

Vue.config.productionTip = false

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

这样就可以在全局使用vuex中的状态了

在组件中使用Vuex

同步

因为已经在mian.js中引入了vuex的实例，所以可以在全局使用，通过this.$store使用vuex实例中的state、getter、mutations、actions

vuex/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
   
  // 用于存放状态（数据）
  state: {
   
    num: 0
  },
  // 用于处理state中的状态（相当于vue中的计算属性）
  getter: {
   

  },
  // 用于存放同步方法
  mu