vue 应用 vuex
1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们常常会应用到 vuex 状态治理, 为什么要应用 vuex 呢?
在一个我的项目开发中频繁的应用组件传参的形式来同步 `data` 中的值,一旦我的项目变得很宏大,治理和保护这些值将是相当辣手的工作。vuex 解决了组件组件的简单传值 `
4. 如果你应用 vuecli 创立我的项目的话, 在创立我的项目的时候, 可间接装置, 如下图:
5. 装置完 vuex, 在我的项目中怎么应用呢? 办法如下:
在 store.js 中增加如下代码:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {name: '小陈壮士',},
mutations: {change(state, a) {
state.name = a;
// 解释阐明 a 是 传过来的参数
},
},
});
6. 在 vue 模板中增加如下代码:
let Dthis=this;
let a= 999;
Dthis.$store.commit("change", a);
console.log(Dthis.$store.state.name); //999
7. 留神:
小伙伴们留神啦:
批改 state 办法, 还有一个 然而不举荐这种写法, 尽管能够实现, 然而在 vue 中是不被容许的, 办法如下:
this.$store.state.name="1000";
console.log(this.$store.state.name); //1000
// 留神: 不要应用这种办法, 尽管能够实现
8. 本期的教程到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!