Vuex状态管理基本使用

# 4的版本可能会有报错
npm i vuex@3.6.2

Vuex 和单纯的全局对象有以下两点不同：
Vuex的状态存储是响应式的。
不能直接改变 store 中的状态，更改Vuex的 store 中的状态的唯一方法是提交 mutation。

基本使用

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 状态仓库
const state = {
    
}

const store = new Vuex.Store({
    state,
    mutations:{

    },
    actions:{

	} 
})

export default store;

// main.js
import store from './store'	 	// 会自动寻找下边的index文件
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

利用Vuex可以实现组件间传值，通信，使用数据等功能

在组件中使用

<script>
// 使用 state 仓库中的 currentMenu值
import { mapState } from 'vuex'
export default{
    computed:{
        ...mapState(['currentMenu'])
    }
}
// 想要修改state中的数据值, 通过commit mutations
// 调用定义在 mutations中的方法,第一个参数是方法名,第二个是传入的参数
// 该语句 可直接在methods的方法中使用
this.$store.commit('selectMenu',item)
</script>

Vuex知识点梳理