Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
-
安装
npm install vuex --save
-
使用
- 初始化
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({ //创建VueX对象
state:{
name:'wangcai' //以键值对的形式存放需要进行管理的状态
}
})
export default store
- 将store挂载到当前项目的Vue实例(
main.js
)当中去
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store, 将创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
- VueX中的核心内容
1.state
存放状态
2.mutations
:操作state数据的方法的集合,比如对该数据的修改、增加、删除等等。
mutations
方法都有默认的形参:([state
] [,payload
])
state
是当前VueX对象中的state
payload
是该方法在被调用时传递参数使用的
this.$store.commit('edit',15)
3.getters
:可以对state中的成员加工后传递给外界
Getters
中的方法有两个默认参数
state
当前VueX对象中的状态对象
getters
当前getters对象,用于将getters下的其他getter拿来用
this.$store.getters.methodName
4.actions
异步操作:由于直接在mutation方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交mutation方法。
Actions
中的方法有两个默认参数
context
上下文(相当于箭头函数中的this)对象
payload
挂载参数
this.$store.dispatch('methodName',{key:value})
5.modules
:当状态非常多时,可以采用模块化管理模式。Vuex 允许我们将 store 分割成module。每个模块拥有自己的 state、mutation、action、getter。