Vuex | erha blog

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

修改state状态必须通过**mutations**
**mutations**只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
state的状态即共享数据可以在组件中引用
组件中可以调用action

初始化:

npm i vuex --save // 安装到运行依赖

// 在vue脚手架中使用
// main.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({})
new Vue({
  el: '#app',
  store
})

state

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中

// 初始化vuex对象
// main.js
const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  },
  // 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }
})

<!-- App.vue -->
<!--原始形式获取值-->
<div> state的数据：{{ $store.state.count }}</div>
<div> state的数据：{{ count }}</div>

// 辅助函数获取值 - mapState
import { mapState } from 'vuex'  // 导入mapState

mapState(['count']) // 采用数组形式引入state属性

//  利用延展运算符将导出的状态映射给计算属性
computed: {
    ...mapState(['count'])
}

mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照

数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步

// mutations是一个对象，对象中存放修改state的方法
const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  mutations: {
     // 方法里参数 第一个参数是当前store的state属性
     // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
     addCount (state,payload) {
       state.count += payload
     }
  }
})

// 原始调用方法
// 直接调用mutations
// 调用store中的mutations 提交给muations
// commit('muations名称', 2)
this.$store.commit('addCount', 10)

// 辅助函数获取方法 - mapMutations
import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

actions: {
  //  获取异步的数据 context表示当前的store的实例 可以通过 context.state 获取状态 也可以通过context.commit 来提交mutations， 也可以 context.diapatch调用其他的action
    getAsyncCount (context) {
      setTimeout(function(){
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', 123)
      }, 1000)
    }
 }

1 2	// 原始调用 this.$store.dispatch('getAsyncCount')

// 辅助函数调用 - mapActions
import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount'])
}

getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters
类似于vue计算属性

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}
--------------------------------
getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

1 2	<!-- 原始方式 --> <div>{{ $store.getters.filterList }}</div>

// 辅助函数 - mapGetters
import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['filterList'])
}

Vuex中的模块化-Module

如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护由此，又有了Vuex的模块化

const store  = new Vuex.Store({
// 定义两个模块user和setting
// user中管理用户的状态  token 
// setting中管理 应用的名称 name
  
  modules: {
    user: {
       state: {
         token: '12345'
       }
    },
    setting: {
      state: {
         name: 'Vuex实例'
      }
    }
  })

1
2
3

<!-- 原始方式获取子模块的属性 -->
<div>用户token {{ $store.state.user.token }}</div>
<div>网站名称 {{ $store.state.setting.name }}</div>

// 设置快捷访问
getters: {
   token: state => state.user.token,
   name: state => state.setting.name
} 
// 通过mapGetters引用
 computed: {
       ...mapGetters(['token', 'name'])
 }

命名空间 `namespaced`

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用

user: {
      state: {
        token: '12345'
      },
      mutations: {
       //  这里的state表示的是user的state
        updateToken (state) {
           state.token = 678910
        }
      }
   },

//  调用子模块的mutations 和以前没区别
methods: {
       ...mapMutations(['updateToken'])
  }

为了保证内部模块的高封闭性，我们可以采用namespaced来进行设置(加上一把锁)

user: {
       namespaced: true,
       state: {
         token: '12345'
       },
       mutations: {
        //  这里的state表示的是user的state
         updateToken (state) {
            state.token = 678910
         }
       }
    },

// 使用带命名空间的模块

// 方法1: 直接调用-带上模块的属性名路径
this.$store.dispatch('user/updateToken') // 直接调用方法

// 方法2: 辅助函数-带上模块的属性名路径
methods: {
    ...mapMutations(['user/updateToken']),
    test () {
        this['user/updateToken']()
    }
}

// 方法3: createNamespacedHelpers 创建基于某个命名空间辅助函数
import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')

// 方法4: 辅助函数-也是带上模块的属性名路径(比之前的更简单)
methods: {
    ...mapMutations('user',['updateToken']),
}

其他

带命名空间的模块,获取根store，当前模块，兄弟模块中的方法

根store

state数据： 通过rootState参数    即：rootState.属性名
getter方法：通过rootGetters参数来获取   即:rootGetters.increNum
附：向根getters中传递参数方式：rootGetters.increNum({id:11,name:'lucy'});
根store中getters定义接多参数：
getters:{   //别人研究：只能传递一个参数，或者一个对象
	increNum:(state)=>(obj)=>{
		console.log(obj)
	}
}
提交mutations：commit('increment',null,{root:true});       //increment为根store中的mutation
分发actions：dispatch('incrementAction',null,{root:true});   //incrementAction为根store中的action
参数部分示例：actions:{
	moduleAAction({state,commit,dispatch,getters,rootState,rootGetters}){
		//处理逻辑
	}
}

当前模块

state数据：通过state参数来获取     即：state.属性名
getter方法：通过getters参数来执行    即：getters.moduleAIncreNum();  //传递参数：可以是多个，也可以是一个obj对象
提交mutations：通过commit参数来执行   即：commit('moduleAMutation);  
参数部分示例：actions:{
      moduleAAction({state,commit,dispatch,getters,rootState,rootGetters}){
           //处理逻辑
      }
}

兄弟模块中

state数据：通过rootState参数来获取     即：rootState.moduleB.属性名
getter方法：通过getters参数来执行    即：rootGetters['moduleB/moduleBGetter']  
提交mutations：通过commit参数来执行   即：commit('moduleB/moduleBMutation',{},{root:true}); 
分发actions：通过dispatch参数来执行   即：dispatch('moduleB/moduleBAction',{},{root:true});

将命名空间的action注册为全局action

root:true