vue之vuex(十)

一、vuex是什么？

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

vuex.png

二、什么情况下我应该使用 Vuex？

1. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的 store 模式
2. 适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：
   ① 多个视图使用于同一状态：
   传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
   ② 不同视图需要变更同一状态：
   采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

三、Vuex 和单纯的全局对象有何不同？

1.Vuex 的状态存储是响应式的
当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation，方便我们跟踪每一个状态的变化。

四、Vuex核心概念

1、store：类似容器，包含应用的大部分状态
一个页面只能有一个容器
状态存储是响应式的
不能直接改变store中的状态，唯一途径显示地提交mutations
在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；如果要再次请求异步，那么就是dispatch一个actions
2、State：包含所有应用级别状态的对象
3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed
4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
5、Actions：包含异步操作、提交mutations改变状态
6、Modules：将store分割成不同的模块

五、下载安装vuex

//下载
npm install vuex --save
//使用
2、作为插件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3、定义容器
 new Vuex.Store({
    state:{
        num:0
    },
    mutations:{  //对象，里面是各种更改state状态值的函数，同步立即更改状态
        add( state,payload ){  //参数state就是上面的state，payload是要传递的值
            state.num+=payload.n;
        }
        reduce(state){
          state.num--
       }
    },  
   actions:{  
        //异步更改状态，可以是ajax请求成功之后改变状态，这里用定时器模拟，1秒钟之后提交mutations改变状态
        //异步的更改状态是直接在index.js里面的actions里面定义action然后commit的(附带参数)，而不是在组件内提交，注意区别，异步是在组件内dispatch这个actions(actions里面已经包含了mutations)，同步是在组件内commit这个mutations(附带参数)
        //异步也可以在index.js里面直接dispatch这个actions(附带参数)
        addAction( context ){ 
              context.commit("add")
        }
        reduceAction( {commit}){  
             commit("reduce")
        }
        //利用es6解构赋值改写上面的代码，因为context对象下面有commit和dispatch方法
        addAction( {commit,dispatch} ){
            setTimeout(function(){
                commit('add',{n:200});   //直接可以获取到commit方法，不用是context.commit
                dispatch('textAction',{test:'测试'}) 
            },1000)
        }
        reduceAction( context,obj ){  //ajax2
            console.log(obj)
        }

    },
//异步更改状态,一段时间之后再改变状态，只要是异步的改变都写在actions里面
    getters:{ //类似计算属性，对状态做进一步的处理
        filternum(state){
            return state.num>=120?120:state.num++;
        }
    }  
})
export default store
4、注入根实例
import store from './store'
new Vue({
    store
})

5、在state里面定义的是状态，如果在组件内部要使用这个状态，那么一般在组件内部通过计算属性来得到它

//vuex.vue
<template>
<button @click="add()">+</button>
<p>{{num}}</p>
//通过getter进行计算后的值
<p>{{num1}}</p>
<button @click="reduce">-</button>
</template>
<script>
export default{
      computed:{
            num(){
                  return this.$store.state.num
            },
            num1(){
                return this.$store.getters.filternum  //被getters进一步处理过的状态
            }
      },
    methods:{
          add(){  
              //要动态的改变状态，就需要显示的提交一个mutations —> add
             //同步，写法一
            this.$store.commit('add',{n:10})
           //同步，写法二
            this.$store.commit({
                  type:'add',
                  n:5
              })
              //异步，写法
             this.$store.dispatch('addAction')
             }，
         reduce(){  
           //要动态的改变状态，就需要显示的提交一个mutations —> add
          //同步，写法一
            this.$store.commit('reduce',{n:10})
         }
   }
</script>

六、辅助函数

//vuextwo.vue
<template>
    <div>
        <button @click="addAction">+</button>
        {{num}} 
        <button @click="reduceAction">-</button>
    </div>
</template>
<script>
// mapstate  辅助函数
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"
export default {
     data(){
         return{
        
         }
     },
    //  计算属性   setter   getter
         //第一种写法
    //  computed: {
    //   num(){
    //       return this.$store.state.num
    //   }
    //  },
        // 第二种写法
    // computed: {
    //  ...mapState(["num"])
    // },
       //第三种写法
    // computed:mapState(["num","list"]),
       //采用getters进行计算
    computed: {
        ...mapGetters(["num"])
    },
    //  methods:{
    //  ...mapMutations(["add","reduce"])
    //  },
    // methods:mapMutations(["add","reduce"])
    methods:mapActions(["addAction","reduceAction"])
    
}
</script>

<style scoped>

</style>

如果感觉有帮助，给予一个宝贵的赞！！！！