[JavaScript知识库] Vuex状态管理基本使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vuex状态管理基本使用 -> 正文阅读

[JavaScript知识库]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>