Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 使用Vuex的步骤:
- 安装Vuex:使用npm或yarn安装Vuex: npm 安装 vuex --save
- 创建Store:创建一个store.js文件,
- 用于创建Vuex store: 从 'vue' 导入 Vue 从 'vuex' 导入 Vuex Vue.use(Vuex) 常量存储 = 新 Vuex.Store({ 状态(state):{ 存放状态 }, 突变(mutations):{ 更改状态 }, 操作(actions):{ 应用状态 } }) 导出默认存储
- 在main.js中引入store: 从“./商店”导入商店 新 Vue({ 埃尔:“#app”, 商店 渲染: h => h(应用程序) })
- 在组件中使用:
- 获取状态 这个.$store.状态.xxx
- 更改状态 this.$store.commit('xxx', value)
- 应用状态 this.$store.dispatch('xxx', value)