1 npm i vuex -s
2 初始化/src/store/index.js中的内容
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
name:'helloVueX',
age:18
}
})
export default store
3 将store挂载到当前项目的Vue实例当中去
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
4 使用
<template>
<div id='app'>
name:
<h1>{{ $store.state.name }}</h1>
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.name
}
},
}
</script>
5 其他细节
mutations
mutations方法都有默认的形参：
([state] [,payload])
state是当前VueX对象中的state
payload是该方法在被调用时传递参数使用的
在vuex中的mutations方法，想调用mutations中的另外一方法，还是用commit,只需要使用this.commit('function')，当前的this指向的就是当前模块中的mutations；
this.commit('set_show_dialog_login', 'no')
// mutations
mutations:{
edit(state){
state.name = 'jack'
}
}
mutations:{
edit(state,payload){
state.name = payload.name
state.age = payload.age
console.log(payload) // 15或{age:15,name:'aaa'}
}
}
this.$store.commit('edit')
this.$store.commit('edit',{age:15,name:'aaa'})
Actions
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
context 上下文(相当于箭头函数中的this)对象
payload 挂载参数
actions:{
aEdit(context,payload){
// payload为传入的自定义参数
setTimeout(()=>{
context.commit('edit', payload)
},2000)
}
}
this.$store.dispatch('aEdit',{age:15})
getters
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数
state 当前VueX对象中的状态对象
getters 当前getters对象，用于将getters下的其他getter拿来用
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
this.$store.getters.fullInfo
无命名空间
this.$store.state.name
this.$store.commit("setName", 'aaa')
this.$store.dispatch("getUserInfo", {id:15})
this.$store.getters.Name
有命名空间
this.$store.state.user.name
this.$store.commit("user/setName", 'aaa')
this.$store.dispatch("user/getUserInfo", {id:15})
this.$store.getters['user/Name']
