vuex 状态管理器

安装vuex

 在src文件夹下 新建一个vuex文件夹  在vuex下新建一个index.js文件

在index.js中引入vue和vuex 并且为了防止vuex有些功能不能正常使用 将vuex当作vue插件 

新建一个vuex的router容器 将在里面添加上状态 state 状态修改必须的 mutation  对状态进行更深层的改变就是 getter 以及有一步操作的时候就要用action 

例如 我们在购物车中的商品列表 就需要存储在state中 每个商品件数的增加和减少 以及总工选了多少件数都要显示 这时候点击增加按钮的时候 需要根据所点击的商品的ID改变相应的件数 则需要在mutation里面写根据ID查找state中shoplist数组的相应对象 改变对象中count的数量 减少按钮同理 下面的总件数 就需要 对state中的数量深度修改 这是就需要放在getter中用到数组中的reduce方法 当我们需要点击增加按钮 一秒钟之后 页面数量再变化的时候 就需要用到异步定时器 这时候 就需要用到action

index。js代码

import Vue from 'vue'
import Vuex from 'vuex'

// 需要将vuex作为vue的插件 否则有的功能用不了
Vue.use(Vuex)

//开始定义store容器 
// new Vuex.Store({
//     //写上对象 告诉vuex 要定义什么数据 改变什么数据
// })

const shopList = [
    {id: 123,
    count: 2},
    {
        id: 456,
        count:6
    }
]


// 创建一个实例 将这个实例暴露出去 就是创建一个
let store  = new Vuex.Store({
    //写上对象 告诉vuex 要定义什么数据 改变什么数据
    state: {
        shopList
    },
    getters: {
        //类似于组件里面的计算属性一样 可以对打他进行进一步的处理
        total(state) {
            //统计 处理每一项 并将每一项加起来
            state.shopList.reduce((startCount,item)=>startCount+item.count,0)
        }
    },
    mutations: {        
        updateCount(state,paload) {
            //改变state状态
            let item = state.shopList.find(item => item.id === paload.id)
            item.count += 1
        }
        //制药提交mutation就有记录 当有异步的时候 记录还是之前的
        //有异步的时候 需要在action里
    },
    actions: {
        updataCountAction(store,obj) {
            store.commit('updateCount', obj)
        }
    }
})

// 将实例暴露出去
export default store

下面的是组件中的代码 

<template>
  <div class="hello">
   <div v-for=“item in list>
     <button @click="add(item.id)">+</button>
     <span>{{item.count}}</span>
     <button>-</button>
   </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //这里的数据不会发生改变 原因是因为用的是data 
      //只能在本组件中改变 若也想改变 则职能写一个计算属性中
      // n: this.$store.state.count
      list: [
        {tip:1},
        {tip:2},
        {tip:3}
      ]
    }
  },
  computed: {
    shopList() {
      return this.$store.state.shopList
    }
  },
  methods: {
    handle() {
      // this.$store.commit('updateCount',{add:10})
      // 只要数据发生变化 那个组件用这个状态那么就会发生变化 vuex中的状态是响应的
    },
    add(id) {
      //需要提交mutation的时候用commit
      // this.$store.commit('handleChange',{id})
      // 我们需要派发一个action dispatch
      this.$route.dispatch('updataCountAction',{id})
    }
  }
}
</script>

注意事项：

1.每个应用将包含一个store实例

2.更改store中状态的唯一方法就是提交mutation

3.mutation必须是同步函数

4.action 可以包含任意异步操作

5.action提交的是mutation 而不是直接修改状态