Vuex ，一个专为 Vue.js 应用程序开发的状态管理模式

vuex ：状态管理器，能够管理你的数据状态

　　作用：将数据交给state集中管理、分发。

　　应用：用于复杂的页面，一个数据被多个页面或者路由共享（互相交互），或者多层级数据交互时可以使用vuex

　　参考地址：https://vuex.vuejs.org/zh/

先安装vue环境：vue create app

使用vuex步骤：

　　1.安装：npm i vuex

　　2.引包：

　　　　引 vue 和 vuex 比如：

　　　　　　import Vue from 'vue';

　　　　　　import Vuex from 'vuex';

　　3.引用：

　　　　Vue.use(Vuex)

　　4.new Vuex.Store({...})

new Vuex.Store({
        //你想要哪些数据被所有组件直接拿到就把这些数据放到state下
        state：{
            //初始化状态
            count:10,
            注意：改变state中的引用类型的数据必须要让数据直接发生变化（地址发生变化）
            比如：
                arr:[{id:xx,num:123}]

                {id:xx,num:124}
                state.arr = [...state.arr]
        },
        mutations:{
            //改变数据的方法
            add(state){ //这里的state就是初始化状态
                //此处为改变state.xxx数据的代码...
            }
            //调用：this.$store.commit(mutations中的函数名，可以跟参数)
            //注意：在mutations下的操作都是同步的。
        }
    })

　　5：new Vue({

　　　　 store

　　　 })

State：驱动应用的数据源

在输出state的时候，可以使用辅助函数来简化你的操作（不用也行）。

　　1.import {mapState} from 'vuex'

　　2.(1) computed:mapState(['count'])

　　2.(2) 建议第二步使用这种：

　　　　computed:{

　　　　　　...mapState(['count'])

　　　　}

getters (等同于computed)：当数据发生变化的时候派生出另一个“事务”

　　view （视图）层应用:

　　　　this.$store.getters.xxx

　　辅助函数：

　　　　mapGetters(['xxx'])

使用组件 - 第三方组件

actions（只要是这个数据的状态需要被很多组件使用，并且此数据还是一个从后台请求的数据（异步数据）就要使用actions）

actions:{

actionsName($store,可以跟参数){

//异步环境之后使用

$store.commit('add',参数)

}

view层使用：

this.$store.dispatch('actionsName',传参)

vue常用的UI组件：

https://www.cnblogs.com/theblogs/p/9964753.html

Vuex ，一个专为 Vue.js 应用程序开发的状态管理模式

猜你喜欢