安装导入
和elementUI,router等基本一样的套路,先进入项目目录下执行cmd命令:
npm install vuex --save
然后在main.js文件中引入。
import Vuex from 'vuex'
Vue.use(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。
我们也可以在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。