vuex的属性及用法-------状态管理工具_vuex models

vuex是一个个专为 Vue.js 应用程序开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态。话不多说，直接上菜。

1. state 数据存贮
2. getter state的计算属性
3. mutation 更改state中状态的逻辑 同步操作
4. action 提交mutation 异步操作
5. model 模块化

export default new Vuex.Store({
    // state相当于组件中的data，专门用来存放全局的数据
    state: {},
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

---

1.state 存储变量

state 存储的变量是可以全局使用的

const store = new Vuex.Store({
    state :{
        a: '',
        b: []
    },
    
})

使用：

let a = this.$store.state.a
 
let b = this.$store.state.b

2.mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

定义方法

mutations: {
    set_a(state,payload) {    //a 是存储state对象的值
    state.a = payload     //payload 是传递的参数
    },
 
    set_b(state,payload) {
    state.b = payload
    },
}

 调用

this.$store.commit('set_a',a)

 

3.getter

getter属性 和vue的computed属性一样--- 计算属性

getters: {
     get_a(state) {
         return state.a
    }
},

使用： 也是跟computed一样

<div>{{$store.getters.get_a}}</div>

 4.action

actions是store中专门用来处理异步的，实际修改状态值的，还是mutations

actions: {
        // setTimeout异步操作
        set_aAsync(context){
            setTimeout(() => {
                context.commit('set_a')
            }, 1000);
            
        }
    },
 

调用：

this.$store.dispatch('set_aAsync')

 

5.model 

我们的store可以认为是一个主模块，它下边可以分解为很多子模块，子模块都可以单独领出来写，写完再导入到主模块中。

models ：{
    a: {
        state: {
        a:'aaa',
        },
        getters: {},
        mutations: {},
        actions: {},
        modules: {}
    }
}

 调用（models中的state）

this.$state.state.a

调用  models中的getter、mutation和actions 的方法和平常一样。

---

以上就是一个比较健壮的使用 vuex 的过程，包括同步的数据保存，异步的网络请求数据的保存以及对响应结果的处理。当然，这仍然是一个初步的使用。例如，组件中使用 state、getters、mutations、actions 还有其他的方法，不用每次都使用 this.$store 来进行调用。不过，方法的使用并没有什么规定，上面的写法比较方便简洁，大多数人都会采用 this.$store 来进行触发 state、getters、mutations、actions。

但随着项目的增大，vuex 与请求接口的配合，vuex 中数据量增大后的封装与抽离都会是一些比较重要的工程。但 vuex 的方便之处正是对数据的全局管理，分包得太复杂也不见得是好事，具体自然是视情况而定。

描述如有错误，欢迎指正！