此文章大部分基于使用webpack脚手架
一、Vuex的安装
在编辑器里的脚手架根目录上打开终端,或者用cmd直接cd到根目录,输入npm install vuex –save 进行下载
二、Vuex的创建
1、在src目录下新建store文件夹,在文件夹中新建index.js文件
(名字起做index在引入路径时可以少写一步)
以下为在index.js中定义的内容:
2、在main.js中的vue根实例上注册store(要记得先把之前写的store的js文件先引进来)
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,store,
components: { App },
template: '<App/>'
})
3、在需要使用数据的组件模板中完成调用,需要使用到根实例也就是this.$store,上的数据或getter方法,以下面的方法使用
<!-- 调用store中的msg数据 -->
<span>{{this.$store.state.msg}}</span>
<!-- 调用store getter中的changemsg方法 -->
<h3>{{this.$store.getters.changemsg}}</h3>
三、vuex 根实例上的属性(配置项)名称都不可更改
state 在这个区域定义数据
state:{
msg:'我是store数据1',
num:100,
} ,
getters 在这里定义属性,可以获取到store的数据,也可以在这里对store里的数据进行操作,不更改原数据,他的使用方式类似计算属性,当作一个属性去调用
getters:{
changemsg:function(state){
return '改变后的----'+state.msg
}
},
getters 调用方式
<!-- 调用store getter中的changemsg方法 -->
<h3>{{this.$store.getters.changemsg}}</h3>
muations 在这里定义方法,这里的方法可以改变原数据
mutations:{
wubai(state){
return state.num=500 },
sanbai(state){
return state.num=300
}
}
使用方式
①在需要使用数据的组件模板上定义触发事件
<button @click="wubai">更改数值为500</button>
<button @click="sanbai">更改数值为300</button>
②.再在当前组件的逻辑里定义方法,在这个方法里使用this.$store.commit的方法给他传递一个参数(自定义名称)
methods:{
fn(){
this.$emit('change',this.son)
},
wubai(){
this.$store.commit('wubai')
},
sanbai(){
this.$store.commit('sanbai')
}
}
③以传递过来的参数为准,在mutations里面以此参数定义一个函数方法,这里的return可以是以下类似方式,也可以是一个函数(当需要在触发事件,传递参数时,return的可以是一个函数,以当前示例为例,传递方式是在click绑定的事件后加一个括号,括号传参)
mutations:{
wubai(state){
return state.num=500 },
sanbai(state){
return state.num=300
}
}