vuex学习旅程 - 爱码网

安装导入

和elementUI，router等基本一样的套路，先进入项目目录下执行cmd命令：

npm install vuex --save

然后在main.js文件中引入。

import Vuex from 'vuex'

Vue.use(Vuex)

vuex学习旅程

至此vue项目引入vuex完毕。

下面结合个人理解对vuex进行解读。

在src目录下建立一个store目录，在store目录下新建一个store.js文件。在上图可以看到我引入了这个store文件。

Store对象有一下几个参数：state，getters，mutations，actions，modules。

state：就是存储我们公共数据的地方，相当于一般模块的data
getters：就是一个state数据的get方法，相当于一般组件中的computed(计算属性)
mutations：就是一个state数据的set方法。但是其应用有一定的流程。
actions和modules我们这里不进行介绍，因为能掌握以上三个属性就基本可以使用vuex了。

实例

//引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

//引入之后，对vuex进行引用
Vue.use(Vuex)

export default new Vuex.Store({
  //公共数据部分data
  state:{
    manname:"jack",
    woman:"rose",
    years:420,
    arr :[
      'love',
      'like',
      'hate',
    ],
  },
  //获取公共数据的计算属性，等于在获取属性之前将属性进行处理的一哈
  getters:{
    getYears:(state)=>{
      return state.years/2;
    }
  },
  //mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是自定义的参数.
  mutations:{
    changName(state,name){
      state.manname = name
    }
  },
  actions:{},
})

这里我们在之前新建的store.js中写入以上数据。其中state中我们定义了manname，woman，years和arr数组。

在一般组件我们没想要获取这些值可以通过直接获取或者使用getters内的方法获取：以下name我使用直接获取，而years我使用了store中的getYears方法获取，将years减半赋给了year。

vuex学习旅程

我们也可以在template中直接获取数据，不绑定参数：

  <el-button>{{this.$store.state.manname}}</el-button>
  <el-button>{{year}}</el-button>

在给state数据赋值时，我们一般在组件中定义一个事件，在事件中将我们要修改的参数传入state中。下图中，我使用了一个点击事件，在点击事件中this.$store.commit('changName',this.name)，将本组件中的name通过调用store中定义的mutations中的changName方法将name赋给manname。

vuex学习旅程