Vuex 状态管理

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

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

　　使用场景1【不同页面中】：公共底部组件，在不同的页面保持他们的状态是同步的。如下，点击跳到不同页面，在不同的页面中这个组件必须是同步的，vuex天然就是同步的。

　　　　　　　　　　　　　  （下面的还是简单的，不用vuex也很容易实现。如果公共组件比较复杂呢。比如，购物车作为多个页面的 公共组件呢）

　　　　　　　　　　　  说明：这种不同页面中公共组件，本质上已经是不同的 组件对象了，所以进入页面，就会重新初始化这个组件的。如果 不用 vuex，就需要先 想办法获取这个组件在哪个页面上，这个组件再显示相应的状态

             

　　使用场景2【不同组件中】：不同的组件，都可以操作某个组件的状态（非父子组件）。

　　　　　　　比如，购物车业务。在不同的组件中 都可以选择加入购物车，不同是组件怎么把数据设置到购物车组件上呢。用vuex就会很方便

　　Vuex 的缺点：vuex是存储在内存中的，刷新页面 或 跳转到 项目外的页面就会清除页面内存的数据，导致页面不能正常显示。【app可以实现没有刷新功能，但是回退功能是一定有】

　　　　　　　　  但是这个问题，在刷新页面后 执行 程序 再次 赋值进去就可以了。只要赋值的程序放在所有页面都会执行的地方，刷新页面后 vuex 重新赋值。【刷新页面清空数据，执行执行程序。这就是一个合理的逻辑】

　　实践中发现的问题：首页获取的数据放在 vuex 中。当进入新闻列表页，获取新闻列表的接口要用到vuex中的数据。点击新闻列表，进入对应的详情页（详情页是在其他的项目中）。

　　　　　　　　　　　返回新闻列表页时，调获取新闻列表的接口时，vuex的数据没有了，导致页面不能正常展示。【原理：单页面应用，一旦跳出当前的单页应用，即不同html文件。浏览器会把之前页面的数据清除】

二、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) // 利用es6解构赋值，可以直接可以获取到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（官网中有比较明确的说明）

　　            

　　 　　注意：vuex 使用了 模块，不一定使用了命名空间。默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。要使用命名空间 需要显示 的配置：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,   // 显示 设置
      state: { }
    }
  }
})

　　1、 vuex 模块 ，但是没有使用命名空间 时，使用辅助函数：

  // 页面中使用 mapState，没有命名空间，就不能使用命名空间。可以使用 es 6的语法简化结构
  ...mapState({
      userInfo: ({ classRoom }) => classRoom.userInfo  // classRoom 是 模块名
    }),

　　2、vuex使用命名空间时，使用辅助函数：看官方文档。

---

视频 听课笔记

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

映射到计算属性中computed