Vuex

vuex是什么？

vue框架中状态管理。

 

哪种功能场景使用它？

场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

 

vuex的store有几个属性值？

state、mutations、actions、getters四个属性值

 

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action 
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

 

怎么使用？

/src下新建 store/store.js

export default ()=>{

　　return new Vuex.Store({

　　　　state: {

　　　　　　tab: 1

　　　　},

　　　　mutations: {

　　　　　　updateTab(store, tab){

　　　　　　　　store.tab = tab

　　　　　　}

　　　　}

　　})

}

在main.js引入

import Vuex from 'vuex'

Vue.use(Vuex)

import store from './store/store'

 

new Vue({

　　store

})

 

调用

this.$store.state.tab

赋值

this.$store.commit("updateTab", 2)