Vuex 基本使用

• 安装vuex
npm install vuex --save

• 介绍        

　　　　state 存储单一状态， 是存储的基本数据

　　　　getters 是 store 的计算属性， 对 state 加工， 是派生出来的数据, 就像计算属性一样，getters 返回的值会根据他的依赖缓存欺来， 且只有当他的依赖值发生改变的时候才会被重新计算

　　　　mutations 提交修改数据， 使用 store.commit 方法更改 state 存储状态 (同步函数)

　　　　acttion (异步) action 的功能和 mutation 类似， 修改 store.state 的值， mutation 必须同步， action 可以同步（view 触发action， action 触发 mutation）、可以异步， mutation 通过 commit 提交， action 通过 dispatch

　　　　　　mutation 专注于修改state，理论上是修改 mutation 唯一途径

　　　　　　action 业务代码，异步请求

　　　　moudules: 模块化

 

• 用法

在 store.js 中引入Vue Vuex Vue.use(Vuex)
    const app ={
        namespaced: true, // 开启命名空间
       state:{
          xxx: value 
       },
       getters:{
           xxx: state=>state.count
       },
       mutations:{
           SET_XXX(state, value){
               state.xxx = value
           }
       },
       actions:{
           actionName(content, data){
               //content 代表 vuex 中上面三部分 -> content.state, contens.getters, content.commit, content.rootGetters, content.rootState
               content.commit('SET_XXX'，data)
               login() {
                   return new Promise((resolve, reject) => {
                       // 调用接口
                       resolve() or reject()
                   })
               }
           }
       } 
    export default app
    另个文件中引入 app 
    import app from 'app.js'
    exoprt defautl new Vuex.Store(
        modules:{
            app:app === app  代表命名空间是 app 指向 app模块
            app1: app 名字改成  app1
        }
    });
    this.$store.state.xxx
    this.$store.getters.xxx
    this.$store.commit('SET_XXX', value)
    this.$store.dispatch('actionName')
    
    this.$store.state.app.xxx
    this.$store.getters.app.xxx
    this.$store.commit('app/SET_XXX', value)
    this.$store.dispatch('app/actionName')
    使用 计算属性计算 vuex 中的值来监听值的变化， 如果计算属性没有被调用的话， 即使计算属性内监听的值发生变化也不会触发计算属性
    以下写入计算属性内
        ...mapState('namespace',['xxx','xxx2'])
        ...mapState('namespace',{
            'xxx':'value' 重命名
        })
     mapState/mapGettes--->computed  ；  mapAcions/mapMutations---->methods