vue状态管理vuex

说明：这个例子使用vue2.0 并且安装的vuex也要跟这个版本对应否则会出现各种各样的错误正确对应版本package.json里

    "vue": "^2.6.14",
    "vuex": "^3.6.2"

之前由于我安装的是vue3 所以我学的vuex都对应不上。vue2和vue3main.js代码都不同，加上vuex的版本也是不同为4.0，所以各种报错 ，下面为该例用的版本。

npm install vuex@3

目录结构

vuex简单使用步骤
1.安装vuex

npm install vuex@3

在这里插入代码片

2.编写store.js文件用于管理状态

//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用插件
Vue.use(Vuex)
export default store

3.在main.js里引入store 并挂载到组件实例，这样每个组件都能使用store里的数据

import Vue from 'vue'
import App from './App.vue'
//引入store
import store from './vuex/store'
Vue.config.productionTip = false

 new Vue({
  el:"#app",
  store,
  render: h => h(App),
})

4.向store里添加state，actions，mutations等，并交给store管理，这段代码里的注释已经详细解释

//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用插件
Vue.use(Vuex)
//创建state用于保存数据 要写成一个对象，因为包含n组key-value，管理n个组件的状态
const state={
        num:0
}
//创建一个actions。要写成一个对象，包含n个响应组件的动作函数
const actions = {
    // jia(a,b){
    //     console.log('action-jia',a,b)
    //     a.commit('JIA',b)
    // }
    //actions里的方法接收两个参数（context,value）context是一个迷你版的$store,value是组件页面传过来的数据
    jia(context,value){
        //用context（迷你$store）的commit方法通知mutations加工状态。
        context.commit("JIA",value)
    }
}
//创建一个对象，要写成一个对象，包含的是n个真正操作数据的方法（直接接触state），这里的方法才是真正加工state的
const mutations = {
    // JIA(a,b){
    //      console.log("JIA",a,b)
    // }
    //这里的 方法接收两个参数（state，value)，分别是管理的状态state和页面传递到actions的数据，再传到这里
    JIA(state,value){
        this.state.num+=value
    }
}
//创建store
const store = new Vuex.Store({
    //交给store管理
    state,
    actions,
    mutations
   
})
//暴露store
export default store

5.在UI组件里展示数据，调用方法等，store里的所有东西（数据和一些API）都保存在$store里
所以取数据用：

<h1>求和为：{{$store.state.num}}</h1>

响应事件的方法需要调用store的dispatch方法，这个方法带着字段和数据寻找对应它的actions，然后actions再commit找到对应的mutations，mutations里的方法真正接触到store里保存的数据完成对数据的操作
页面调用方法，dispatch分发给actions

this.$store.dispatch('jia',this.n)

找到对应的actions

 jia(context,value){
        //用context（迷你$store）的commit方法通知mutations加工状态。
        context.commit("JIA",value)
    }

再找到对应的mutations完成对数据的操作

 JIA(state,value){
        this.state.num+=value
    }

至此，一个简单的vuex应用就成功了

getters的使用

vuex的getters类似于vue的computed（计算属性），是经过一些规则处理state中的原始数据，getters也交由store管理，保存在$store.getters里

const getters = {
      newValue(state){//newValue就是getters处理后的数据
          return state.num*100
      }
}
const store = new Vuex.Store({
    //交给store管理
    state,
    actions,
    mutations,
    getters
   
})

在页面取用的时候保存在$store.getters.key中

$store.getters.newValue}

mapState和mapGetters

有时候需要把state里的数据经过处理再在页面上展示（比如放大100倍），这时候可以使用计算属性实现，

computed:{
    //自己定义computed
    sum:function(){
      return this.$store.state.num
    },
    }

页面获取数据方式

<h1>通过computed处理state后取值求和为：{{sum}}</h1>

在computed里同样可以处理来自于getters里的数据】

computed:{
 bigSum:function(){
      return this.$store.getters.newValue
    },
}

页面获取方式

<h1>和经过computed里处理getters处理后为：{{bigSum}}</h1>&nbsp;

上面在compute获取处理state里的值都是自己定义函数编写的，mapState和mapGetters的作用就是不用自己编写，使编码简化。首先从vuex引入这两个方法

<sctipt>
 import {mapGetters, mapState} from 'vuex'
</script>

接着在computed里

computed:{
 ...mapState({sum:'num'}),
}

sum是我在页面展示数据用的，num对应的是state保存的值，…展开符是因为computed本身就是一个大的对象，{sum:‘num’}也是对象，必须这样展开。
页面获取方式

<h1>通过computed里mapState处理state后取值求和为：{{num}}</h1>

同理mapGetters的使用方法

computed:{
...mapGetters({bigSum:'newValue'})
}

bigSum为页面展示数据用的，newValue对应getters里的数据
页面获取

 <h1>和经过computedmapGetters里处理getters处理后为：{{newValue}}</h1>&nbsp;

如果mapState和mapGetters需要映射多组数据，可以有简写形式，但是命名必须更规范

   ...mapState(['num']),
   ...mapGetters(['newValue'])

页面获取

 <h1>通过computed里mapState处理state后取值求和为：{{num}}</h1>
 <h1>和经过computedmapGetters里处理getters处理后为：{{newValue}}</h1>&nbsp;

mapMutations的使用

说明：在一些actions里，并没有什么逻辑业务和异步事件等，仅仅用了commit方法，既然这样，可以在页面越过dispatch，类似这样的actios

jia(context,value){
    //    //用context（迷你$store）的commit方法通知mutations加工状态。
        context.commit("JIA",value)
    },

就可以在页面直接commit

 //直接对话mutations
     increment（）{
      this.$store.commit('JIA',this.n)
     }
      

调用这个事件

<button @click="increment">+</button>&nbsp;

mapMutataios的作用就是自动生成这个increment函数，但是需要在点击事件调用的时候传值

<button @click="increment(n)">+</button>&nbsp;

先引入mapMutations

import {mapMutations} from 'vuex'

在methods里使用

    ...mapMutations({increment:'JIA'}),

这个也可以简写，但是一般不推荐

   <button @click="JIA(n)">+</button>&nbsp;
     ...mapMutations(['JIA']),

mapActions的使用

mapActions使用方法基本跟mapMutations一样。页面里的方法一般存在逻辑或者异步等，所以不能直接commit，步骤
先引入

import {mapActions} from 'vuex'

  ...mapActions(
      {
        incrementOdd:"jiaOdd",
        incrementAsync:"asyncJia"
      }
      ),

mapActionsF同样可以简写，方法同mapMutations。

实现数据共享

vuex的全部状态state都以$store的形式注入到vue实例，所以这个实例里的所有组件都可以使用vuex管理的状态store，非常简单。下面添加Person组件使用store的数据。添加Person组件，在$store.state.num就能取到vuex管理的store里的state
PersonCom.vue

<template>
    <h1>我是Person组件,上方组件求和为{{$store.state.num}}</h1>
</template>
<script>
export default {
  name: 'PersonCom',
}
</script>

这样Vue的状态管理vuex就学习完了！