vuex状态管理

Vuex是什么？

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• 示例：

  1. 首先我们用vue init webpack vuex-demo生成一个项目

  2. 然后进入vuex-demo中使用命令：npm i -S vuex下载vuex的依赖包

  3. 进入项目中的src文件夹下创建一个store.js的文件，为仓库文件

  4. 然后在store.js文件中使用：import Vue from 'vue'，import Vuex from 'vuex'代码导入vue和vuex的包，然后在用Vue.use(Vuex)实例vue

  5. 定义一个仓库，然后使用export导出，代码如下：

     export const store = new Vuex.Store({
         state:{
             count:0,
             fiurts:[
                 {name:'苹果',price:10},
                 {name:'香蕉',price:11},
                 {name:'橙子',price:12},
                 {name:'哈密瓜',price:13},
                 {name:'西瓜',price:100}
             ]
         }
     });
     

  6. 仓库定义完之后在到main.js入口文件中使用：import { store } from './store'导入刚刚定义好的store仓库

  7. 在Vue实例中挂载store

     new Vue({
       el: '#app',
       router,
       store,//3.挂载一下
       components: { App },
       template: '<App/>'
     })
     
     

  8. 在别的组件中使用this.$store.state.count就可以拿到store中的数据了

     //这是在components文件夹下创建的一个.vue组件
     <template>
         <div>
             <h2>two page</h2>
             <button @click="add">点击增加</button>
             <p>{{count}}</p>
         </div>
     </template>
     
     <script>
     export default {
         data(){
             return {
                 count:this.$store.state.count
             }
         },
         methods:{
             add(){
                 this.count+1
             }
         }
     }
     </script>
     <style>
     
     </style>
     

     Getter：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

     • getter的作用：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数

     • 传参：Getter 接受 state 作为其第一个参数

     • 示例

       export const store = new Vuex.Store({
           state:{
               count:0,
               fiurts:[
                   {name:'苹果',price:10},
                   {name:'香蕉',price:11},
                   {name:'橙子',price:12},
                   {name:'哈密瓜',price:13},
                   {name:'西瓜',price:100}
               ]
           },
           getters:{
               changePrice:(state)=>{
                   return state.fiurts.map(itme=>{//通过map把fiurts里面的数据遍历出来
                       return {
                           name:itme.name,
                           price:itme.price * 2
                       }
                   })
               }
           },
         )}
       

       可以通过辅助函数将store 中的 getter 映射到局部计算属性

       import { mapGetters} from 'vuex'
       export default {
           computed:{
                   ...mapGetters(['changePrice'])
               }
       	}  
       

  

  • mutations的作用：更改vuex中state中状态的唯一方法是提交mutations，Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

  • 示例

    export const store = new Vuex.Store({
        state:{
            count:0,
            fiurts:[
                {name:'苹果',price:10},
                {name:'香蕉',price:11},
                {name:'橙子',price:12},
                {name:'哈密瓜',price:13},
                {name:'西瓜',price:100}
            ]
        },
        mutations:{
            newPrice:(state,num)=>{
                return state.fiurts.map(itme =>{
                    itme.price -= num
                })
            }
        }
      )}
    

    可以通过辅助函数将store 中的 mutations映射到局部的方法中

    import { mapMutations} from 'vuex'
    export default {
        methods:{
            ...mapMutations(['newPrice']),
        },
    

    通过事件触发

    <button @click="newPrice(1)">优惠大促销</button>
    <ul>
                <li v-for="(item,index) in fiurts" :key="index">
                    <span>品种：{{item.name}}</span>
                    <span>价格：{{item.price}}</span>
                </li>
            </ul>
    /!--点一下优惠大促销的按钮就会价格-1--/
    

  • Action:在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务

    • action的作用：action类似于mutation，不同之处在于action是提交mutation，而不是直接改变状态，action是可以包含异步操作，但是mutation是不行的，action是通过$store.dispath方法触发的，mutation通过$store.commint方法触发的

    • 示例

      export const store = new Vuex.Store({
          state:{
              count:0,
              fiurts:[
                  {name:'苹果',price:10},
                  {name:'香蕉',price:11},
                  {name:'橙子',price:12},
                  {name:'哈密瓜',price:13},
                  {name:'西瓜',price:100}
              ]
          },
          mutations:{
              newPrice:(state,num)=>{
                  return state.fiurts.map(itme =>{
                      itme.price -= num
                  })
              }
          },
          actions:{
              newPriceAsyns:(StoreAll,num)=>{
                  setTimeout(function(){
                      StoreAll.commit('newPrice',num);
                  },2000)
              }
          }
      });
      

      可以通过辅助函数将store 中的 action映射到局部的方法中

      import { mapAction} from 'vuex'
      export default {
          methods:{
              ...mapAction(['newPriceAsyns']),
          },
      

      通过事件触发

       <button @click="newPriceAsyns(1)">优惠大促销异步</button>
      /!-- 点击优惠大促销异步的按钮等上2秒钟价格就会-1 --/
      

  • module:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

    const moduleA = {
      state: () => ({ ... }),
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const moduleB = {
      state: () => ({ ... }),
      mutations: { ... },
      actions: { ... }
    }
    
    export const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态