在vue中如何使用vuex
一、vuex概念
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
二、何时使用
多个组件需要共享数据时
三、安装
npm install vuex@3 --save //vue2安装3 vue3安装4
四、搭建vuex环境
1.创建文件：src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 应用vuex插件
Vue.use(Vuex)
// 创建并暴露store
export default new Vuex.Store({
// 数据,相当于data
state: {
},
//准备getters——用于将state中的数据进行加工
getters: {
},
//准备mutations——用于操作数据（state）
mutations: {
},
//准备actions——用于响应组件中的动作
actions: {
},
modules: {}
})2.在main.js中引入
//引入store
import store from './store'
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})五、 核心概念
vuex中一共有五个状态 State Getters Mutations actions Modules
5.1 state
统一定义公共数据，相当于data
在state中写入的数据，在任意组件中都可使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sum: 0,
school:"尚硅谷",
subject:"前端",
}
})使用方法一：
{{$store.state.sum}}使用方法二：
{{sum}}
computed:{
sum(){
return this.$store.state.sum
},
}使用方法三：
import {mapState} from "vuex"
computed:{
//对象写法
...mapState({sum:'sum',school:'school'}),
//数组写法
...mapState(['sum','school'])
}5.2 getters
类似于computed(计算属性，对现有的状态进行计算得到新的数据),用于将state中的数据进行加工
//准备getters——用于将state中的数据进行加工
getters: {
bigSum(state){
return state.sum * 10
}
}使用方法一：
{{$store.getters.bigSum}}
使用方法二：
{{bigSum}}
computed:{
sum(){
return this.$store.getters.bigSUm
},
}使用方法三：
{{bigSum}}
import {mapGetters} from "vuex"
computed:{
//对象写法
...mapGetters({bigSum:"bigSum"}),
//数组写法
...mapGetters(['bigSum'])
}5.3 Mutations
使用它来操作数据(类似于methods)
对数据进行加减操作：
mutations: {
add(state, value) {
state.sum += value
},
reduce(state,value){
state.sum -= value
}
},点击两个按钮对sum进行加减的操作
方法一：
使用commit触发mutation中的方法
methods:{
add(){
this.$store.commit('add',2)
},
reduce(){
this.$store.commit('reduce',2)
}
}方法二：
使用辅助函数，若需要传递参数，再绑定事件时传递好参数：
import {mapMutations} from "vuex"
methods:{
//对象形式
...mapMutations({add:'add',reduce:'reduce'}),
//数组形式
...mapMutations(['add','reduce'])
}5.4 Actions
用于响应组件中的动作，发起异步请求
//准备actions——用于响应组件中的动作
actions: {
odd(context,value){
if(context.state.sum % 2){
context.commit('add',value)
}
},
},使用方法一：
methods:{
odd(){
this.$store.dispatch('odd',2)
}
}使用方法二：
使用辅助函数，若需要传递参数，再绑定事件时传递好参数：
import {mapActions} from "vuex"
methods:{
//对象形式
...mapActions({odd:'odd'}),
//数组形式
...mapActions(['odd'])
}5.5 Modules
模块拆分 +命名空间
目的：让代码更好维护，让多种数据分类更加明确。
修改 store/index.js文件
//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
//创建并暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
})count.js文件和person.js文件：
export default {
// 开启命名空间
namespaced:true,
actions:{
},
mutations:{
},
state:{
},
getters:{
},
}六、开启命名空间后的使用方法：
1.组件中读取state数据：
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),2.组件中读取getters数据：
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])3.组件中调用dispatch
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})4. 组件中调用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),