vuex基本使用

1 导入

// vue2

npm i vuex@3 

// vue3

npm install vuex@next --save 

在根目录添加store/index.js文件

/store/index.js

// 创建Vuex核心 store
// 第一步引入Vuex
import Vuex from 'vuex'
// 引入Vue
import Vue from 'vue'
// 使用Vuex
Vue.use(Vuex)

// 响应组件中的动作-异步
const actions = {
  getUserInfo(context, value) { // this.$store.dispatch('getUserInfo')
    // context 这个值是本身
    // value 这是一个对象
    // 函数体
    // 不要这个里面修改state
    // 去触发下mutations的函数修改参数
  }
}

// 操作数据（state）-同步
const mutations = {
  editUserInfo(context, value) { // this.$store.commit('editUserInfo')
    // context 这个值是本身
    // value 这是一个对象
    // 函数体
  }
}

// 用于存储数据
const state = {
  userInfo: {} // this.$store.state.userInfo 获取值
}

// 创建store
const store = new Vuex.Store({
  actions,
  mutations,
  state
})

// 暴露store 使其他VueComponents可以使用   简称vc组件实例对象
export default store

在main.js中导入

main.js

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

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')