vue2 — vuex状态管理

一、为什么使用vuex ： https://www.cnblogs.com/goloving/p/9080005.html

vuex的功能 和 localstorage 的作用是一样，把数据在一个所有页面都可以存取的地方。但是vuex的数据具有响应式（类似数据双向绑定），而 localstorage 的数据是固定的，必须手动设置。

二、vuex 的使用：https://www.cnblogs.com/hermit-gyqy/p/11270315.html（更直观） 或 https://blog.51cto.com/9161018/2351075（说明更详细）   或  https://vuex.vuejs.org/zh/guide/（官网）

　　1、基本使用方法：

　　　　state：存储状态（可以理解为变量）可以从计算属性中返回某个状态

　　　　getters：通常用在数据的二次处理（过滤数据...），可以理解为state的计算属性

　　　　mutations：修改状态，并且是同步的。

　　　　actions：异步操作。

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

const store = new Vuex.Store({
  state: { // 存储状态（可以理解为变量）可以从计算属性中返回某个状态
    count: 8
  },
  getters: { // 通常用在数据的二次处理（过滤数据...），可以理解为state的计算属性
    newCount (state) {
      return state.count + 1    // 这里一旦count改变，newCount也会同步改变
    }
  },
  mutations: { // 修改状态，并且是同步的
    changeCount (state, val) {
      state.count = val
    }
  },
  actions: { // 异步操作
    actCount (context, val) {
      setTimeout(function () {
        context.commit('changeCount', val) // 直接可以获取到commit方法，不用是context.commit
      }, 1000)
    }
  }
})

export default store

　　注：不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

三、vuex 的 模块化：便有扩展          https://vuex.vuejs.org/zh/guide/modules.html（官网，比较详细）

　　modules： Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter 用法其实和上面是一样的。

　　注意：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

　　说明：vuex的数据，每一个组件文件都有很多的数据，如果把所有的数据都放在一个文件中，就会很不好管理。所以需要把vuex数据拆分出来，一个vuex文件管理一个页面中数据。

// vuex目录下的index.js
import Vue from 'vue'
import vuex from 'vuex'
import acApply from './active-apply'
import ContentStore from './content' // 引入content.js
Vue.use(vuex)
export default new vuex.Store({
  modules: {
    acApply,
    content: ContentStore
  }
})

/* acApply 模块 */
export default {
  state: {
    userMsg: 99
  },
  mutations: {
    cgUserMsg (state, val) {
      state.userMsg = val
    }
  }
}

　　1、获取content模块中 store 的数据

<div>{{$store.state.content.count}}</div>

　　2、调用模块内的 action、mutation 和 getter 方法：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。

this.$store.commit('cgUserMsg',45)  // 和调用全局store中的对应方法一样

　　3、命名空间：   默认情况下，模块内部的 action、mutation 和 getter是全局的，如果需要模块具有更高的封装度和复用性，可以给我们设置命名空间。

　　　  参考：使用模块后不借助辅助函数访问数据的方法  https://blog.csdn.net/weixin_43660626/article/details/90448312

/* acApply 模块 */
export default {
  namespaced: true,
  state: {
    userMsg: 99
  },
  mutations: {
    cgUserMsg (state, val) {
      state.userMsg = val
    }
  }
}

this.$store.commit('acApply/cgUserMsg',45)   // 调用的时候带上模块名称

四、使用 Vuex 的辅助函数：https://www.jianshu.com/p/46ed0316c31b  或 https://www.jianshu.com/p/7f790b4188e5 或 https://www.cnblogs.com/padding1015/p/8734031.html 或 https://vuex.vuejs.org/zh/api/#mapstate（官网）

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

　　1、mapState：将store中state数据映射到组件的计算属性中computed中：映射后，组件通过this.name就可以获取到了。

　　　  注意事项，映射的名称不要和当前组件的data，methods名称发生冲突，否则会被覆盖。

  computed: {
    ...mapState(["name"]), //name和vuex中的state保持一至。直接把vuex中的name映射到当前组件中
  },
　create () {
    console.log(this.name)  // 组件中可以直接通过this获取到vuex里面的state值
  }

　　2、mapMutations：把mutations里面的方法映射到methods中

  methods: {
    ...mapMutations(['changeCount']),  // mapMutations映射到组件的methods中
    test () {
      this.changeCount(323)  // 组件中直接使用，vuex中 mutations 里的方法
    }
  }

　　3、mapAcions：把actions里面的方法映射到methods中

　　4、mapGetters：把getters属性映射到computed身上　　

　　注意：

　　　　1、this.$store.commit 有两种写法：

        //写法一
        this.$store.commit('add',{n:10})
        //写法二
        this.$store.commit({
            type:'add',
            n:5
        })

　　　　2、getters 和 state 一样都是存储数据的，但是getter的数据通常是对state 数据的二次处理。就是类似计算属性的功能，

　　　　　  store中getters数据的获取，和state获取挂载的对象不同。这点和组件中的 计算属性有点不同：

this.$store.state.count       // stete中值的获取
this.$store.getters.newCount  // getters 中值的获取

　　　　3、为什么要把  同步  和  异步  区分开：https://www.zhihu.com/question/48759748（看尤雨溪的回答）

　　　　　  区分 actions 和 mutations  目的是 为了能用 devtools 追踪状态变化。（就是为了便于调试）

　　体会：vuex的明显一个作用就是页面间数据变动是同步的。比如，一个页面中有显示支付银行卡的卡号好，还有选择银行卡的按钮。点击选择银行卡的按钮，

　　　　要跳到另外的一个页面中去选择。选好后，跳回来(回退)，如果是用vuex的话，之前的页面显示的银行卡号会同步为自己选择的银行卡号。

　　　　不然的话就需要先存了缓存(本地存储，或公共变量中)，然后在相应的页面中去取。比较麻烦。

五、vuex 使用模块后借助辅助函数访问数据的方法：https://vuex.vuejs.org/zh/api/#mapstate（官网中有比较明确的说明）

　　            

---

视频 听课笔记

1、mutations是唯一一个可以改变vuex状态的方法集。

映射到计算属性中computed