做一个简单的vuex如何使用的介绍:
先安装:
npm i vuex --save-dev
新建一个store文件夹,
在store文件夹中建一个index.js文件,在该文件中:
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
var state={ //state中的属性就是需要在vuex中存放的数据
name:"电脑",
age:2,
data:'布拉布拉'
}
var actions={ //异步方法,比如这里就定义了一个叫做changeName的方法
changeName(context,name){
context.commit('changeName',name)
}
}
var mutations={ //同步方法, 这里的方法命名最好与上面的一样,比如这里都是changeName
changeName(state,newName){
state.name=newName //改变state中的name值为newName
}
}
var store=new vuex.Store({
state,
actions,
mutations
})
export default store
=================================================================
在main.js文件中,引入store:
import store from './store' //vuex状态管理器
new Vue({
el:"#app",
router,
store
})
// 在组件中调用state中的数据:比如name的方式
{{$store.state.name}}
//在组件中触发change方法,然后再在该方法中调用vuex中的changeName方法的方式:
<button @click="change">改变名字</button>
{
methods:{
change(){
// 这一步与vuex中的 changeName(state,newName){ state.name=newName } 相对应, 至此,vuex中的name就被修改成了 '新电脑'
this.$store.dispatch("changeName",'新电脑')
}
}
}
总结:
state :中存放vuex中的数据
actions :中定义异步方法
mutations :中定义同步方法
this.$store.dispatch("changeName",'新电脑') :调用vuex中的方法、传参的方式
$store.state.name ：使用vuex中的数据，比如使用name的方式