Vuex的详细使用

Vuex使用的详细步骤

1. Vuex是什么？

Vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件共用的数据

2. 什么时候使用？

中大型单页面应用，组件间关系复杂，组件状态多，组件间通信困难，这个时候就可以考虑使用Vuex

3. 使用Vuex的好处

1. 能够在vue中管理公共的数据，便于开发和维护
2. 在整个项目中可以实现组件之间的数据共享
3. 储存在Vuex中的数据都是响应式的，能够保持数据与页面上的数据保持同步

• 注意：Vuex的数据是存放在内存上面的，页面刷新Vuex的数据就会被清空，我们可以通过storage将状态存储在本地使用。

4. Vuex的五大核心概念

1. state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。

2. mutations：装着处理数据逻辑方法的集合体，是改变state中数据的唯一方法，修改数据是同步的。

3. actions：提交mutations修改数据，与mutations功能类似，但修改数据是异步的。

4. getter:可理解为store的计算属性，能读取state中的数据。

5. modules：当store过于臃肿时，可使用modules将store分割成模块，每个模块中都有自己的state、getter、mutations、actions

5. Vuex的使用方法

1、用Vue脚手架工具构建好项目；

2、利用npm包管理工具安装vuex；

3、新建一个store文件夹，并在文件夹下新建“index.js”文件；

4、在文件中引入vue和vuex。

1）Vuex的具体使用

1. 利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了

npm install vuex --save

要注意的是这里加上 –save，因为这个包我们是在生产环境中是要使用的。

2. 新建一个store文件夹（这个不是必须的），并在文件夹下新建index.js文件，文件中引入我们的vue和vuex并引用。

import Vue from "vue"
import Vuex from 'vuex'
Vue.use(Vuex)

const state ={
    count: 1
}
const mutations ={
    numAdd(state){
        state.count++
    }
}
const actions = {}
const getters = {}
// 利用Vuex.Store创建实例并暴露出去
export default new Vuex.Store({
	state,
    mutations,
    actions,
    getters,
    //modules:{}
})

3. 在main.js 中引入新建的vuex文件

import Vue from 'vue'
import App from './App.vue'
// 引入vuex文件
import store from "@/store"

new Vue({
  render: h => h(App),
  router,
  //注册    
  store
}).$mount('#app')

通过这几步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。

2) 组件中如何访问state中的数据？

1. 组件访问state中数据的第一种方式

this.$store.state.全局数据名称

例如，在组件Home.vue中使用，注意：在组件中可以省略this关键字

<template>
  <div>
    <h1>这是home首页</h1>
   <!-- vuex分模块的时候 没有分模块直接$store.state.count即可-->   
    <h1>{{$store.state.home.count}}</h1>
  </div>
</template>

2. 也可以通过mapState进行访问

<template>
  <div>
    <h1>这是home首页</h1>
    <button>{{count}}</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:'myHome',
    computed: { 
      //数组的形式
      ...mapState(["count"]);
      //还能写成对象的形式
      ...mapState({
        count:(state)=>state.count
    })
    }
}
</script>

3. 通过computed的计算属性直接赋值

computed:{
 count(){
  return this.$store.state.count;
 }
}

这里需要注意的是return this.$store.state.count这一句，一定要写this，要不你会找不到$store的。

3) 如何修改Vuex的状态（数据）？

1. Vuex提供了commit方法来修改状态

通过commit一个mutation来修改状态

• 组件代码，在button上的修改方法

<button @click="$store.commit('add')">+</button>

<button @click="$store.commit('reduce')">-</button>

• store.js文件

const mutations={
 add(state){
  state.count+=1;
 },
 reduce(state){
  state.count-=1;
 }
}

关于传值：这只是一个最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。我们来看具体代码：

• 现在store.js文件里给add方法加上一个参数n。

const mutations={
 add(state,n){
  state.count+=n;
 },
 reduce(state){
  state.count-=1;
 }
}

• 在组件里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10。

 <button @click="$store.commit('add',10)">+</button>

 <button @click="$store.commit('reduce')">-</button>

2. Vuex提供了dispatch方法来修改状态

通过dispatch一个action方法，通过action可以commit一个mutation来修改状态

在action中可以增加异步方法处理逻辑，例如：发送请求获取数据等。

• 组件中的代码：

  mounted() {
    // 派发action，获取floor组件的数据
    this.$store.dispatch("getFloorList");
  },

• store.js中的代码

const state = {
    // floor 组件的数据
    floorList:[]
};
const mutations= {
    GETFLOORLIST(state,floorList) {
        state.floorList = floorList
    }
};
const actions = {
    // 获取floor数据
    async getFloorList( { commit } ){
        let result = await reqFloorList()
        if(result.code === 200) {
            // 提交mutation
            commit("GETFLOORLIST",result.data)
        }
    }
};

3. 高级用法----辅助函数修改状态

有那几个辅助函数(4大金刚)

mapState,mapActions,mapMutations,mapGetters

• 辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的

1. mapGetters辅助函数如何使用？

• 组件代码：

<h3>{{cartList}}</h3>

import { mapGetters } from "vuex";
computed: {
  ...mapGetters(["cartList"])
}

• store.js文件代码：

const state = {
    // 购物车列表数据
    cartList: []
}
const getters = {
    cartList(state) {
        return state.cartList[0] || {}
    },
}

2. mapMutations辅助函数如何使用？

• 组件代码：

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

//从Vue中引入mapMutations 函数
import { mapMutations } from "vuex";
//将需要的mutations函数，映射为当前组件的methods方法
methods: {
    ...mapMutations(["add"])
}

• store.js文件代码：

state: {
    count: 0
},
mutations: {
    add(state){
        state.count++
    }
}