关于vue.js:vue使用vuex

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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!