vuex

快来打我* 2022-04-12 05:56 268阅读 0赞

vuex在项目中维护一个状态，在项目中的作用是一个唯一的数据源， 相当于全局对象，各个组件共享这一个对象

初始化一个新项目

vue init webpack myvue3

安装vuex

npm install vuex --save

现在的项目结构如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70]

开始在main.js中引入并使用vuex, 在对象store的mutations中定义处理函数

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import vuex from 'vuex'
    Vue.config.productionTip = false
    
    Vue.use(vuex);
    
    //实例state对象
    const store = new vuex.Store({
      //全局状态
      state:{
        count: 0
      },
      //定义处理函数
      mutations:{
        add(state){
          this.state.count += 1;
        },
        decrease(state){
          this.state.count -= 1;
        }
      }
    })
    
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>',
      store //在vue中使用store
    })

修改HelloWorld.vue如下, “$store.commit(‘add’)” 表示触发mutations中函数，处理状态值

<template>
      <div class="hello">
        {
       {this.$store.state.count}}
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('decrease')">-</button>
      </div>
    </template>
    
    <script>
    
      export default {
        name: 'HelloWorld',
        data() {
          return {
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

打开页面，就可以在组件中动态的更改状态值啦  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70 1]

再来修改下HelloWorld.vue， 换成计算属性的写法，每次只需要调用计算属性即可：

<template>
      <div class="hello">
        {
       {count}}
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('decrease')">-</button>
      </div>
    </template>
    
    <script>
    
      export default {
        name: 'HelloWorld',
        data() {
          return {
          }
        },
        computed:{
          count(){
            return this.$store.state.count;
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

上面是演示了一个状态count的情况， 若状态过多，就要写多个计算属性也是累赘， 所以vuex提供了一个辅助函数mapState。  
再增加一个状态

//实例state对象
    const store = new vuex.Store({
      //全局状态
      state:{
        count: 0,
        name: '张三'
      },
      ......

使用mapState

<template>
      <div class="hello">
        {
       {count}}{
       {name}}
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('decrease')">-</button>
      </div>
    </template>
    
    <script>
      import { mapState } from 'vuex'
      export default {
        name: 'HelloWorld',
        data() {
          return {
          }
        },
        computed: mapState(['count', 'name'])
      }
    </script>
    
    <style scoped>
    </style>

## actions ##

通过上面例子大致明白了组件中获取状态值，组件中通过触发mutations定义的函数来处理state值。 接着了解下actions， 在mutations可以对多个state操作，那么actions就可以理解为可以对多个mutations进行操作，如下actions中定义了一个init\_add函数，表示初始化数据和执行一次+1操作

import Vue from 'vue'
    import App from './App'
    import router from './router'
    import vuex from 'vuex'
    Vue.config.productionTip = false
    
    Vue.use(vuex);
    
    //实例state对象
    const store = new vuex.Store({
      //全局状态
      state:{
        count: 0,
        name: '张三'
      },
      //改变状态
      mutations:{
        init(state){
          this.state.count = '100';
          this.state.name = "王五";
        },
        add(state){
          this.state.count += 1;
        },
        decrease(state){
          this.state.count -= 1;
        }
      },
      actions:{
        init_add(state){
          state.commit('init');
          state.commit('add');
        }
      }
    })
    
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>',
      store //在vue中使用store
    })

组件调用的地方要修改成dispatch，触发actions

<button @click="$store.dispatch('init_add')">初始化并增加</button>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70]: /images/20220412/09ee29f848364a0ba0c7891d50cfa5bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjM4NTk1_size_16_color_FFFFFF_t_70 1]: /images/20220412/9515d9cc4274407dbcae971fdf88409a.png