在vue中如何使用vuex_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:"前端",
        
    }
})

使用方法一：

<div>{{$store.state.sum}}</div>

使用方法二： 

<div>{{sum}}</div> 
 
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
       }
    }

使用方法一：

<h1>{{$store.getters.bigSum}}</h1>

使用方法二：

<div>{{bigSum}}</div> 
 
computed:{
    sum(){
      return this.$store.getters.bigSUm
    },
 }

使用方法三：

<p>{{bigSum}}</p>
 
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进行加减的操作

 <button @click="add">+</button>
 <button @click="reduce">-</button>

方法一：

使用commit触发mutation中的方法

methods:{
  add(){
    this.$store.commit('add',2)
  },
  reduce(){
    this.$store.commit('reduce',2)
  }
}

方法二：

使用辅助函数，若需要传递参数，再绑定事件时传递好参数： <button @click="add(2)">+</button>

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)
      }
   },
 },

 使用方法一：

<button @click="odd">当前求和为奇数再加</button>
 
methods:{
  odd(){
    this.$store.dispatch('odd',2)
  }
}

使用方法二：

使用辅助函数，若需要传递参数，再绑定事件时传递好参数： <button @click="odd(2)">当前求和为奇数再加</button>

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'}),