vueX 初级上手教程-手把手教学

此文适合没用过vueX 的初级小白，和我一样的人使用，大佬请绕路！！！

1.安装：

npm install vueX --save
复制代码

2.新建store.js文件夹： 引入文件，一般都是：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
复制代码

3.建立存储和方法：

let state = {
保存的字段名和初始值；
例如：
pageShow:false,
}
const mutations =  {
自定义的方法：
例如：
    changeStatus(state,data){
    	state.pageShow = data;
    },
}
复制代码

以上就建立了一个简单的vueX 文件：

4.若想使用保存，就在相应的地方进行如下操作：

this.$store.commit("changeStatus", false);
复制代码

此操作就将上述定义的方法执行，并且将值改为了false;

5.在其他页面中拿到我们保存的数据：

①直接使用 this.$store.state.pageShow 就可以拿到数据

②computed 属性：

computed:{
    	isShow(){
      	     return this.$store.state.pageShow;
    	}
    },

需要定义一个方法去拿到这个数据；
复制代码

③ watch方法：监听（较为常用）

watch: {
    "$store.state.canRefresh"(newValue, old) {
      console.log(newValue, old, 'new');
      this.getData();
      this.$store.state.canRefresh = false;
    },
    "$store.state.btnStatus"(newValue,old){
      console.log(newValue,old,"hahaha");
      this.canClick = false;
      this.$store.state.btnStatus = true;
    }
  }
复制代码

注意此时watch下面的this指向，他不直接指向vue组件，所以我们直接使用$store.state.方法 即可！

此时我们可以观测到这个值的变化，newvalue和old ，并且可以在这个方法中执行相应的操作，方法

内，无需考虑this 的指向问题！

以上就是整个vueX 简单的使用的过程了，具体的需要去官网详细了解！