Vue-4 vuex状态管理

vuex

专门为vue.js应用程序开发的状态管理模式

1. 安装

   1. 手动安装

      1. 下载安装 npm i vuex @3.4.0 --save

      2. 创建store.js文件

         import Vuex from 'vuex'
         import Vue from 'vue'
         
         Vue.use(Vuex)
         
         const state = {}
         const mutations = {}
         const actions = {}
         const getters = {}
         
         export default new Vuex.Store({
             state,
             mutations,
             actions,
             getters
         })
         

      3. 在main.js中集成vue

         import store from '@/store';
         new Vue({
           router,
           store,//集成vuex
           render: h => h(App)
         }).$mount('#app')
         

   2. cli安装 勾选即可

2. vuex 的执行流程

   组件通过 `dispatch` 方法触发 `actions` 里面的动作，通过`actions`里面的函数触发 `mutations`里面的函数修改`state`里面的值，然后在渲染最新值到页面中。
   
   备注：之后在 `mutations` 里面修改值，才能被监听。
   

   也可以跳过action直接调用commit修改state数据，但不会被vuex工具监测到 容易造成数据问题 不推荐
   

3. 辅助函数

   辅助函数就是将 store 里面的方法 状态映射到对应的组件中，这样的写法简单

   1. 在computed中映射 state 和 getters

      属性名和属性值不一样

      <template>
          <h1>{{myCounter}}</h1>
          <p>{{newValue}}</p>
      </template>
      <script>
          
      import {mapSate,MapGetters}   from 'vuex'
      export default {
      // 这里面映射出来的状态，和组件自己的状态的使用方式一样
              computed:{
              ...mapState({
      			// 属性名(组件中使用的名字)：属性值( store 中的 state名称)
                  myCounter:'counter'
              }) 
              ...mapGetters({
      			//  属性名(组件中使用的名字)：属性值( store 中的 getters 中的函数名)
                  newValue:'counters'
              }) 
          }
      }
      </script>
      

      属性名和属性值一样的时候，可以简写为数组

      <template>
          <h1>
              {{counter}}
          </h1>
          
          <p>
              {{counters}}
          </p>
      </template>
      <script>
          
      import {mapSate,MapGetters}   from 'vuex'
      export default {
      // 这里面映射出来的状态，和组件自己的状态的使用方式一样
      	computed:{
              // 上文中的属性名和属性值一样的时候，可以简写为数组
              ...mapState(['counter']) // 一般不使用
              
              ...mapGetters(['counters']) 
      	}
      }
      </script>
      

   2. 在methods中映射 mutations 和 actions

      属性名和属性值不一样的时候

      <script>
      import {mapMutations,mapActions} from 'vuex'
      export default {
          // 在其他地方调用映射的函数
          created(){
              this.onplus()
              this.setPlus()
          },
      // 这里面映射出来的方法，和methods的方法调用一样
          methods:{
              ...mapMutations({
                  // 属性名(在组件中使用):属性值(在store中的 mutations 里面的函数名)
                  onPlus:'plus'
              }) 
              
              ...mapActions({
              	setPlus:'setplus1'
         		})
          }
      }
      </script>
      

      属性名和属性值一样的时候，可以简写为数组

      <script>
      import {mapMutations,mapActions} from 'vuex'
      export default {
          // 在其他地方调用映射的函数
          created(){
              this.plus()
              this.setplus1()
          },
      // 这里面映射出来的方法，和methods的方法调用一样   
          methods:{
              ...mapMutations(['plus']) // 一般不使用
              ...mapActions(['setplus1'])
          }
      }
      </script>
      

4. store 模块化

   user .js模块

   // 
   // 模块User
   const User={
       state:{
           uname:'zrs',
           age:20
       },
       mutations:{
           changeName(state){
               state.uname='zzr'
           } 
       },
       actions:{
           onChangeName(context){
               context.commit("changeName")
   		}
   	},
       getters:{
           
       }
   }
   
   export default User
   

   product.js 模块

   // 模块Product
   const Product={
       state:{
           hotList:[],
          	cratList:[],
           num:0
       },
       mutations:{
           onHotList(state,list){
               state.hotList=list
   		}
       },
       actions:{
           setHotList({commit}){
               commit("onHotList",['aaa','ddd','cccc'])
   		}
   	},
       getters:{
           
       }
   }
   
   export default Product
   

   模块化

   import Vue from 'vue'
   
   import Vuex from 'vuex'
   
   import user from './modules/user.js'
   import product from './modules/product.js'
   
   const store= new  Vuex.Store({
       
       // 模块化在这里书写
       modules:{
           user,
           product
       }
   })
   

   组件中使用 state

   备注：在没有使用命名空间的情况下，在组件中的script标签中使用getters，actions，mutations的方式没有改变。辅助函数的使用方式也没有改变。

   <p>
       {{$store.state.user.uname}}
   </p>
   
   <p>
       {{$store.state.product.num}}
   </p>
   

   小结:

   合并之后，只有state是装在对应的模块中，其他都是简单的合并，如果多个模块中有重名的函数，那么对应的就会成为一个数组，触发重名函数的时候，每个函数都会执行，难以排错，所以在vuex模块化的时候，一定**不**要有重名函数。如果要有重名函数的话，那么就要使用 命名空间了，在对应模块中添加 `namespaced : true` 这样就会导致在使用辅助函数，组件中使用dispatch方法的时候，也需要改变。