Vuex 是什么?
Vuex 是一个针对Vue.js 开发的状态管理模式。说简单一点就是一个工具,可以管理(修改或设置)所有
组件用到的数据,而不需要借助之前的event bus 或props在组件间传值。
Vuex使用场景
大型单页应用程序,存在多组件共享数据的时候,需要用到
store(一个容器对象,存储Vuex 中的state.mutations,actions,actions,getters等)
- state(一个保存数据的对象,对象中的数据可以供所有组件使用)
- mutations(一个对象,保存的是更改state的函数,也只有它能更改state中的值,触发方式this.$store.commit(‘函数名’,参数)
- actions(一个对象,保存的是触发mutations的函数,让mutations去修改state中的值)
- getters(一个对象,保存的是一些类似与计算属性的函数,可以通过他们得到任何依赖于state的新的数据)
使用Vuex
//第一步
npm install vuex -S
//第二步,在src目录下创建store.js 文件夹
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={}
const mutations ={}
const actions = {}
const getter = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
//第三步,在入口文件main.js 中引入
import store from '@/store/store'
//实例中注入
new Vue({
el:'#app',
router,
store,
components:{App},
template:'<App/>'
})