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