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

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

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

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

 　　（课件：2019-1-12 、Vuex参考地址：https://vuex.vuejs.org/zh/    、   vue常用的UI组件（写手机端很快）：https://www.cnblogs.com/theblogs/p/9964753.html）

---

先安装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'])

 

mutatins（类似于methods）是个对像，里面放各种函数(更改状态的逻辑），函数会接收 state 作为第一个参数　　

　　　　const mutations = {

　　　　　　add(state, n) {     //n可以是简单类型，也可以是引用类型的

　　　　　　state.count += n.n;

　　　　　　}

　　　　}

　　view 层：　　　　　

 　　　　this.$store.commit( ' 函数名 , ' 参数 ' )

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

//初始化的状态（数据），当改变state的时候会改变视图
const state = {
    count: 10,
    ary: [
        { num: 0, id: 0 },
        { num: 0, id: 1 }
    ]
}
//只有mutations才能改变vuex中的数据状态哦！~
//什么时候让mutations改变，使用this.$store.commit('add')函数名称
const mutations = {
    add(state, n) {
        state.count += n.n;
    },
    //如果你的mutation调用了，数据也改了，但是视图没有，这个时候就要想到
    //对象要改变地址的问题。
    //Object.assgin({},state.obj)   JSON.parse(JSON.stringify(state.obj))
    INCREMENT(state, obj) {
        let o = state.ary.find(d => d.id == obj.id);
        o.num += obj.n;
        state.ary = [...state.ary];
    }
}

export default new Vuex.Store({
    state,
    mutations,
    getters: {
        toDou: (state) => {
            let arr = JSON.parse(JSON.stringify(state.ary));
            return arr.map(e => {
                if (e.num < 10) {
                    e.num = '0' + e.num
                } else {
                    e.num = '' + e.num
                }
                return e;
            });
        }
    }
})

<template>
  <div id="app">
    <p>这是第一级数据</p>
    {{toDou}}
    {{ary}}
    <ul>
      <li v-for="(val,key) in toDou">
        {{val.num}}
        <button @click="changeNum(val.id)">+</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  name: "app",
  methods: {
    changeNum(id) {
      this.$store.commit({
        type: "INCREMENT",
        n: 1,
        id
      });
    }
  },
  computed: {
    ...mapState(["ary"]),
    ...mapGetters(["toDou"])
  }
};
</script>

　

 

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

　　　　actions:{

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

　　　　　　//异步环境之后使用

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

　　　　　　}

　　　　}

　　view层使用：

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

 

module （将臃肿的store分割成多个模块）

　　由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

　　为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。

　　每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

 

---

vue常用的UI组件：

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