vuex的详细使用流程

古城微笑少年丶 2023-01-15 12:28 110阅读 0赞

## vuex的详细使用流程 ##

#### 1.vuex的创建 ####

如果使用vue3.0，在选择选项得时候选择vuex ，他就会自动帮你创建好  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]  
!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210422170336768.png  
![在这里插入图片描述][20210422170519480.png]  
如果是vue其他版本就去下载vuex，然后在入口文件导入`store`这个文件，也就是放置vuex状态管理得地方导入vuex，创建使用实例对象，放在vue得实例对象里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 1]

#### 1.1Store数据源这里只存数据不改 ####

![在这里插入图片描述][20210422171419633.png]  
怎么在其他页面获取这里面得状态呢  
我提供了几种写法

> 第一种写法

//数据全部写在computed里面，这是因为有的时候没有办法相应到
    //通过this.$store.state.属性名 获取 
    computed: { 
        name() { 
          return this.$store.state.name;
        },
      },

> 第二种写法 mapState

computed: mapState({ 
    	 name: (state) => state.name,
      	 age: "age",
    //这里说明一下只要在vue的方法里面包含this的就不能用箭头函数,比如说我在这里调用了我自定义得变量或者方法，要通过this.什么去取到，
    //这个时候我们就不能使用箭头函数，指向不对，除非在外部加了一句that=this之类的改变或者使用call，apply等

> 第三种写法

computed:mapState(['name','age'])
     //这种写法要在前面引入import { mapState} from "vuex"; 特别要注意要引入别忘了
     
    // 第三种方法优化 优点可以后期添加属性等都很方便
    computed:{ ...mapState(['name','age']))}

#### 1.2getters计算属性 ####

> 相当于组件中的`computed`可以进行复杂的运算，用法跟`state`差不多,只不过他使用的是mapGetter `import { mapState,mapGetters } from "vuex";`

在这里我讲一个用法  
![在这里插入图片描述][20210422174442447.png]

> 在这里我在vuex中返回一个方法，听过参数sex的数值判定是帅哥还是美女  
> ![在这里插入图片描述][2021042217491029.png]  
> ![在这里插入图片描述][2021042217494554.png]  
> ![在这里插入图片描述][20210422175001988.png]  
> 这样写就可以让当前页面的数据驱动vuex里面的数据并且可以使用不同的数据，打个比方我另外一个页面也需要这种方法，就把参数换成另外一个

#### 1.3mutations修改state数据的地方（同步触发） ####

> 唯一一个可以修改值  
> ![在这里插入图片描述][20210422180344507.png]![在这里插入图片描述][2021042218040119.png]![在这里插入图片描述][20210422180418299.png]![在这里插入图片描述][20210422180507414.png]

他也有`mapMutations`的方法  
像`state`,`getters`,取值都是`this.$store.state.属性名`  
而`mutations`是`this.$store.commit('事件名'，payload)`第一个参数是你在vuex中`mutations`中提交的事件名，第二个就是参数  
![在这里插入图片描述][20210422181525261.png]![在这里插入图片描述][2021042218153653.png]

> 最终结果就是点一下加10岁  
> ![在这里插入图片描述][20210422181639329.png]

还可以传一个对象参数写法就是

//组件写法
     methods: { 
        addage() { 
          this.$store.commit("changeAge", { num:10});
        },
      },
    //vuex中写法
    mutations: { 
       changeAge(state,n){ 
         state.age+=n.num
       }
    }
    //下面这种风格效果是一样的，使用type来标注commit名
     methods: { 
        addage() { 
          this.$store.commit({ type:'changeAge',num:10});
        },
      },

扩展一个点`this.$set('属性名'，索引，属性值)`，有的时候你直接添加一个值，他是响应不到的时候，就可以使用

#### 1.4action（异步触发） ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][20210423101218471.png]

`action`是用dispatch来提交的，相当于commit，Action函数接受一个与store实例具有相同方法和属性的context对象，因此可以调用`context.commit`,提交一个mutation，或者通过`context.state`和`context.getters`来获取state和getters

action:{ 
    //实战中我们一般用参数解构的方式来写
     change4(context){ 
          context.commit('changeAge')
        },
     change4({ commit}){ 
        commit('changeAge')
     }
     }
      mutation:{ 
    		change4(){ 
    		...
    		}
    	}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 3]

> action提交给mutation，然后交给mutation来执行

在组件中的写法

addage3(){ 
    // 两种写法,里面只能有两个参数，当然你如果要传多个参数，则把第二个参数写成对象的形式
          // this.$store.dispatch('change4',10)
          this.$store.dispatch({ 
            type:'change4',
        	num:{ }
          })
        }

action异步处理跟mutation没什么区别，说白了就是v-Devtools不能检测到，为了能检测到所以写到action

## 总结：state数据源，mutation修改数据（state）（commit）提交，action异步处理（dispatch）解构commit提交，getter计算属性 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221022/cce9c19044064b228205d6482abe1129.png
[20210422170519480.png]: /images/20221022/ff947c7f3a214833adaadd5d0da0e827.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 1]: /images/20221022/0ba02cf5480c43269c97a41c5cf7dece.png
[20210422171419633.png]: /images/20221022/7af9d764d3904942bfd4c1869dd1b92d.png
[20210422174442447.png]: /images/20221022/cf5487851bd849d69615ef7fb11d370e.png
[2021042217491029.png]: /images/20221022/fc1f9fdea8604fb48e8686e13be42959.png
[2021042217494554.png]: /images/20221022/4fdad0cc7ceb460dadc929297cc9c943.png
[20210422175001988.png]: /images/20221022/c22f3a3d903443a3bbba019e6bbb5c41.png
[20210422180344507.png]: https://img-blog.csdnimg.cn/20210422180344507.png
[2021042218040119.png]: https://img-blog.csdnimg.cn/2021042218040119.png
[20210422180418299.png]: https://img-blog.csdnimg.cn/20210422180418299.png
[20210422180507414.png]: /images/20221022/7dc5ea17524e414a97fdfede1517c5e8.png
[20210422181525261.png]: https://img-blog.csdnimg.cn/20210422181525261.png
[2021042218153653.png]: /images/20221022/026cd0f572cb41cbaaf14581ef080019.png
[20210422181639329.png]: /images/20221022/d880fc947a2c4a2993372d65cf84ebad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 2]: /images/20221022/2ca5dde8d8c444a880d8b0ab75c93268.png
[20210423101218471.png]: /images/20221022/aee15fe6f44540b09a016473434ce9fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70 3]: /images/20221022/824ad03a173243adb616e424b0020e18.png