Vuex使用详解，附加项目遇到的问题（简单明了）

﹏ヽ暗。殇╰゛Y 2021-09-17 02:01 313阅读 0赞

## ##

### **Vuex的定义、个人理解和结构解析** ###

**vuex定义：vuex是一个专门为vue.js设计的集中式状态管理架构。**

vuex的个人理解：

**是存储公有状态数据state的一个仓库(store)；解决了大型应用时组件传参的繁杂和不易维护性；vuex的状态储存是响应的，store中状态发生改变后相应组件会得到更新；不能直接修改store中的状态，唯一途径是显示的提交(commit)mutation, 可以通过getter获取state的派生值；**

Vuex结构组成：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70][]

Store(仓库)：

**State(状态)：**负责存储应用的状态数据，可以**理解为数据容器**；组件中获取vuex中的数据时使用**this.$store.state.stateName**来获取；

**Mutations(变化)：**利用它来更改状态state数据，本质是处理数据的函数，其接收唯一参数值state。我们可以在methods方法中使用**this.$store.commit(‘mutationName’);来触发一个mutation的方法；必须是同步函数**，否则devtool中的数据将会出现问题；

**Actions：通过触发mutation来修改state状态，重要的是可以异步改变state状态**，在methods方法中使用**this.$store.dispatch(actionName);直接触发**

**Getters：**有些状态需要进行二次处理就可以使用getters，可以在方法中**使用this.$store.getters.valueName对派生出来的状态数据进行访问；当依赖发生改变时会改变**

**mapActions、mapMutations、mapGetters、mapState：是利用辅助函数将actions、mutations、getters、state映射到本地计算属性或methods方法中去；使用前需引入映射如:    import \{mapGetters\} from ‘vuex’**

## ##

### **vuex的demo实践：** ###

第一步：创建项目

基于vue-cli脚手架生成一个vue项目；

常用命令：

**npm i vue-cli --g**                     来安装vue-cli

** vue --vesion ** 或  **vue -V       ** 来检查vue安装是否成功

**vue init webpack** 项目名       来创建vue-cli 脚手架项目

**注意：**当**运行 npm i vue-cli --g 安装vue-cli**报 “ WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) ” 错误时可以尝试 使用 **  cnpm i vue-cli --g  安装**

第二步：检查项目是否创建成功，安装vuex

**npm run dev                       ** 来运行vue项目

**npm i vuex --save               **来安装vuex

第三步：代码实现父子组件通过vuex传递参数Demo

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1][]

1、项目文件结构如下: 创建父子组件文件和store.js文件

![20181121233520913.png][]

2、Store.js文件引用vuex如下：

import Vue from 'vue';
    import Vuex from 'vuex';
    
    //vue引用vuex
    Vue.use(Vuex);
    
    //state状态数据容器
    const state={
       testMsg:"state中的一行测试文本",
       parentMsg:"父组件原始文本",
       childMsg:"子组件原始文本",
       count:99,
    }
    
    //修改satate的方法，就是state状态数据的处理函数
    const mutations= {
       changeParentMsg:function(state,str){
          state.parentMsg=str;
       },
       changeChildMsg:function(state,str){
          state.childMsg=str;
       },
    }
    
    //异步，通过commit触发mutations中的方法来修改state
    const actions={
       changeParentTxt({commit},data){
          commit('changeParentMsg',data);
       },
       changeChildTxt:function(context,data){
          context.commit('changeChildMsg',data);
       },
       //上述两个方法中的参数使用{commit}和context均有效，context代表store本身
    }
    
    //对获取到的state数据进行过滤修改
    const getters={
       countNum:function(state){
          if(state.count>100){
             return state.count+100;
          }else {
             return state.count-50;
          }
       }
    }
    
    //创建store实例，将在main.js文件中将它加入到vue实例对象中
    export default new Vuex.Store({   //export default 是封装代码，使外部可用
       state,  //依此加入到store对象中
       mutations,
       actions,
       getters,
    });

3、Main.js文件在vue实例中引用store对象：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2][]

将store实例从根组件中‘注入’到子组件中，子组件通过‘this.$store’调用

4、组件文件：

HelloWorld.vue

<template>
      <div class="hello">
        <h3>测试文本如下：</h3>
        <p>在组件模板中直接输出获取值：{
       {$store.state.testMsg}}</p>
        <hr>
        <Parent></Parent>
        <hr>
        <h4>getters获取state的值修改后如下：</h4>
        <p>{
       {$store.getters.countNum}}</p>
      </div>
    </template>
    
    <script>
    import Parent from './Parent'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      components:{
        Parent
      },
    }
    </script>
    
    
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    
    </style>

Parent.vue

<template>
       <div>
          <div class="parentContainer">
             <div>
                <h3>父组件的内容：</h3>
                <p class="txt">{
       {oldtxt}}</p>
             </div>
             <button class="btn" @click="changeParentTxt()">点击更改父组件内容</button>
             <button class="btn" @click="changeChildTxt()">点击更改子组件内容</button>
          </div>
          <Child></Child>
       </div>
    </template>
    <style>
       .parentContainer {
          height:150px;
          width:350px;
          background-color: lightblue;
          color:#fff;
          margin:10px auto;
       }
       .txt {
          border:1px solid red;
          padding:10px;
       }
       .btn {
          background-color: #fff;
          color: #000;
       }
    </style>
    <script>
       import Child from './Child'
       export default {
          name:"Parent",
          data(){
             return {
    
             }
          },
          components:{
             Child,
          },
          computed:{
             oldtxt:function(){
                return this.$store.state.parentMsg;
             }
          },
          methods:{
             changeParentTxt:function(){
                let newParentTxt="更改后的父组件内容变长的很多！！！";
                this.$store.dispatch('changeParentTxt',newParentTxt);
             },
             changeChildTxt:function(){
                let newChildTxt="这里是父组件点击修改后的文本内容....";
                this.$store.dispatch('changeChildTxt',newChildTxt);
             },
          },
       }
    </script>

Child.vue

<template>
       <div class="childContainer">
          <div>
             <h3>子组件的内容：</h3>
             <p class="txt">{
       {oldtxt}}</p>
          </div>
          <button class="btn" @click="changeChildTxt2()">点击更改子组件内容</button>
          <button class="btn" @click="changeParentTxt2()">点击更改父组件内容</button>
       </div>
    </template>
    <style>
       .childContainer {
          height:150px;
          width:350px;
          background-color: lightcoral;
          color:#fff;
          margin:10px auto;
       }
       .txt {
          border:1px solid red;
          padding:10px;
       }
       .btn {
          background-color: #fff;
          color: #000;
       }
    </style>
    <script>
       export default {
          name:"Child",
          data(){
             return {
    
             }
          },
          computed:{
             oldtxt:function(){
                return this.$store.state.childMsg;
             }
          },
          methods:{
             changeParentTxt2:function(){
                let newParentTxt="我这是通过子组件修改父组件state后获取到的文字！！！";
                this.$store.dispatch('changeParentTxt',newParentTxt);
             },
             changeChildTxt2:function(){
                let newChildTxt="点击子组件按钮后内容变成了这样！！！";
                this.$store.dispatch('changeChildTxt',newChildTxt);
             },
          },
       }
    </script>

### **Vuex在项目中代码使用详解** ###

1、组件模板获取state状态数据：将状态对象赋值给内部对象，也就是将stroe.js中的值赋值给模板中的data中的值，有三种赋值方式：

①使用computed计算属性直接赋值；

②使用mapState辅助函数来赋值（将state值映射到局部计算属性）；

③使用mapState的数组来赋值；

<div>computed计算属性获取的值：{
       {count01}}</div>
        <div>使用mapState辅助函数来赋值：{
       {count02}} </div>
        <div>使用mapState的数组来赋值：{
       {count}} </div>

computed:{ //多个computed时，后面的会覆盖前面的
        count01(){  //普通计算属性
          return this.$store.state.count;
        },
        ...mapState({  //mapState(obj)对象辅助函数赋值
          count02:(state)=>{return state.count}  //ES6的箭头函数
        }),
        ...mapState(['count'])  //mapState(arr)数组来赋值
      }

2、getters获取的是经过加工过滤后的state状态数据。

//store.js中getters定义
    //对获取到的state数据进行过滤修改
    const getters={
      changeCount:function(state){
        if(state.count>100){
          return state.count*2;
        }else {
          return state.count-1;
        }
      }
    }
    
    const mutations= {
       addCount:function(state,num){
        return state.count+=num;
       },
    }

// 组件模板中使用mapGetters
    <template>
       <div class="childContainer">
          <h3>原值：{
       {count}}</h3>
          <h3>getter加工过滤后的值：{
       {changeCount}}</h3>
          <button @click="$store.commit('addCount',20)">点击数字加20</button>
       </div>
    </template>
    <script>
    import {mapState,mapMutations, mapGetters} from 'vuex'
       export default {
          name:"Child",
          data(){
             return {
             }
          },
          computed:{
            ...mapState(['count']),
            ...mapGetters(['changeCount']),
          },
          methods:{
            ...mapMutations(['reduceCount']),
          },
       }
    </script>

同理在组件模板可以通过this.$store.getters.changeCount来获取store中过滤更改后的count值；

mapGetters辅助函数和mapState辅助函数类似是将store中的getter 映射到局部计算属性computed中，mapGetters使用前先import引入；

3、组件模板更改store中的state值通过mutations中的方法：mutations同步更改状态（$store.commit('mutationName')）的方式：

①使用this.$store.commit('mutationName')；

//store.js
    //mutations中更改satate的方法，就是state状态数据的处理函数
    const mutations= {
       addCount:function(state,num){
        return state.count+=num;
       },
       reduceCount:function(state,num){
        return state.count-=num;
       },
    }

<button class="btn" @click="$store.commit('addCount',50)">点击使用commit直接触发mutations中的方法</button>

②使用mapMutations辅助函数将mutations中的方法映射到methods中；

a、组件中首先需要使用import 引入mapMutations和mapState（依赖性），如

import {mapState,mapMutations} from 'vuex'

b、将mutations中的方法映射到methods中；

methods:{
        ...mapMutations(['reduceCount']),
    },

c、组件模板中直接使用映射的方法如：

<button class="btn" @click="reduceCount(20)">通过mapMutations触发mutations中的方法</button>

4、actions异步更改状态state，actions方法通过mutations中方法来更改state，actions中的方法有两种写法如下：

//异步，通过commit触发mutations中的方法来修改state
    const actions={
       changeParentTxt({commit},data){
          commit('changeParentMsg',data);
       },
       changeChildTxt:function(context,data){
          context.commit('changeChildMsg',data);
       },
       //上述两个方法中的参数使用{commit}和context均有效，context代表store本身
    }

mapActions的使用类似mapMutations将方法映射到methods中，组件模板使用前先 import 引用mapActions、mapMutations、mapState；

methods:{
        changeCountNum:function(){
           this.$store.dispatch("countNum_action",99);  //$store.dispatch("actionName");直接触发actions中的方法
        },
    },

5、module模块组：为解决state状态对象过多而杂的问题，我们将一个store划分为多个module模块，每个模块拥有自己的state、mutations、actions、getters使用如下

①store.js中是声明modules

//声明模块组module
    const moduleA={
      state:{
        name:'zhangsan',
        age:27
      },
      mutations:{},
      actions:{},
      getters:{}
    };
    
    const moduleB={
      state:{
        name:'wangwu',
        age:26
      },
      mutations:{},
      actions:{},
      getters:{}
    };
    
    export default new Vuex.Store({
      modules:{a:moduleA,b:moduleB}  //使用a做为moduleA的别名，b同理
    });

②模板组件中获取指定module中的state数据有以下两种方式

<div>模块A的name值是：{
       {$store.state.b.name}}</div>

computed:{
        moduleAname:function(){
           return this.$store.state.a.name;
        }
    },

### **PS附加：** ###

1、如果store文件太大，也可以将 action、mutation 和 getter 分割到单独的文件。分割的文件需要export  default 导出，并在store.js文件中的import 导入，如下

//mymutations.js 文件
    const mutations= {
       changeParentMsg:function(state,str){
          state.parentMsg=str;
       },
       changeChildMsg:function(state,str){
          state.childMsg=str;
       },
    }
    export default mutations

import state from './mystate'
    import mutations from './mymutation'
    import actions from './myactions'
    
    export default new Vuex.Store({
       state,  
       mutations,
       actions,
       getters,
    });

2、在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用；

3、vuex数据在页面刷新时数据会丢失问题，解决思路是vuex更改state数据时同时存储到sessionStorage，当getters获取state数据时判断state为空时对应sessionStorage是否存在，为true则获取sessionStorage赋值给丢失了数据的stateName，如下：

//store.js中定义getters获取时为空会判断从sessionStorage获取值或初始值
    const getters={
       countNum:function(state){
          if(!state.count){
            state.count=10; //首次num数值为空初始值赋值为10
            let sessionVal=sessionStorage.getItem("count_num");
            if(sessionVal){
              state.count=parseInt(sessionVal);
            }
          }
          return state.count
       }
    }
    
    //store.js中定义mutations更改state后存储到sessionStorage
    const mutations= {
       change_numCount:function(state,data){
        state.count=data;
        sessionStorage.setItem('count_num',data);
      },
    }

//组件模板中触发更改state状态数据的action方法
    methods:{
       changeCountNum:function(){  
          this.$store.dispatch("countNum_action",99);
       },
    },

参考网址：[https://blog.csdn.net/H5\_QueenStyle12/article/details/75386359][https_blog.csdn.net_H5_QueenStyle12_article_details_75386359]

[https://blog.csdn.net/mjzhang1993/article/details/78321903][https_blog.csdn.net_mjzhang1993_article_details_78321903]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70]: /images/20210726/cc884ebd03f44b679e4d6f2a84c1c350.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 1]: /images/20210726/5e72097be154435b93323c0aec215a79.png
[20181121233520913.png]: /images/20210726/88f7dbbf377f4df8a18d05c607b8006e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6dW9sdW8_size_16_color_FFFFFF_t_70 2]: /images/20210726/45478aa7304b4f7fb46a78c561eb484e.png
[https_blog.csdn.net_H5_QueenStyle12_article_details_75386359]: https://blog.csdn.net/H5_QueenStyle12/article/details/75386359
[https_blog.csdn.net_mjzhang1993_article_details_78321903]: https://blog.csdn.net/mjzhang1993/article/details/78321903