Vuex 是一个专门为 Vue 应用程序开发的状态管理模式,适合开发大型单页应用, 它可以更好的在组件外部管理状态javascript
重要文件版本。vue
每个 Vuex 应用的和兴就是 store(仓库)。store 基本上就是一个容器,它包含着应用中大部分的状态(state) Vuex 和单纯的全局对象有如下不一样:java
vuex中的state、action、mutation的关系。python
state负责存储整个应用的状态数据,要注意在入口文件main.js注入store对象,就能够在根组件下的子组件使用this.$store.state获取状态了。 mutation里面写着改变状态数据的方法(必定要写在这里),mutation是同步事件要注意,里面的方法不能写异步的,组件中触发一个mutation的方法store.commit(mutationName)。 action也是一个改变状态数据的事件,但不一样的是action改变状态是经过调用mutation来实现的,注意action是个异步事件。直接触发action就使用this.$store.dispatch(actionName)。
三,vuex的简单使用sql
1,下载安装vuex
npm install --save vuex //注意要带save
2,src目录下建文件夹和文件结构是src/store/store.js,store.js代码以下:express
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increase (state) { state.count++ } }, actions: { actionIncrease ({commit}) { commit('increase') } } }) export default store
3,在入口文件main.js引入,并挂载到根节点npm
import Vue form 'vue'; import Vuex from 'vuex'; import store from './store/store.js' Vue use(Vuex); new Vue({ el: '#app', store, template: '<App/>', components: { App } })
4,子组件调用状态值count,并经过点击触发action提交mutation来增长数值
子组件模板:app
<template> <span>{{count}}</span> <button @click="add">增长数值</button> </template> <script> export default { computed:{ count () { return this.$store.state.count; } }, methods: { add() { this.$store.dispatch('actionIncrease') } } }; </script>
ok,以上就是vuex的简单使用了,别的组件如需调用或修改vuex的数据状态也依此法使用。