Vuex ~ 初识

状态:data中的属性需要共享给其他vue组件使用的部分(即data中需要共用的属性)

 

1、初识vuex直接来个小demo

　　下面操作都是基于vue-cli，如果不了解先学习下vue-cli

　　利用npm包管理工具，进行安装 vuex。

　　　　npm install vuex --save

　　新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

　　　　import Vue from 'vue';

　　　　import Vuex from 'vuex';

 　  使用我们vuex，引入之后用Vue.use进行引用。

　　　　Vue.use(Vuex);

　　通过以上操作，vuex就算引用成功了

　　

　　直接来个demo，在vue-cli的src目录下新建一个文件夹vuex,并在此文件夹下新建一个store.js文件;直接上demo

　　

现在我们store.js文件里增加一个常量对象
        const state={
            count:1
        }
    
    用export default 封装代码，让外部可以引用。
        export default new Vuex.Store({
            state
        })
    
    新建一个vue的模板，xxx.vue。在模板中我们引入我们刚建的store.js文件，
    并在模板中用{{$store.state.count}}输出count 的值。
        <template>
            <div>
                <h2>{{msg}}</h2>
                <hr/>
                <h3>{{$store.state.count}}</h3>
            </div>
        </template>
        <script>
            import store from '@/vuex/store'
            export default{
                data(){
                    return{
                        msg:'Hello Vuex'
                    }
                },
                store   //注意要先引用下
            }
        </script>
    在store.js文件中加入两个改变state的方法。

        const mutations={
            //改变state的数值
            add(state){
                state.count++;
            },
            reduce(state){
                state.count--;
            }
        }
        export default new Vuex.Store({
            state,
            mutations
        })

    
    在xxx.vue模板中加入两个按钮，并调用mutations中的方法
        <div>
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </div>
    这样进行预览就可以实现对vuex中的count进行加减了

 

2.state访问状态对象

上面例子中 const state ，就是访问状态对象，也就是兄弟组件间的共享值。
    下面是状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值

    三种赋值方式：
        一、通过computed的计算属性直接赋值
            computed:{
                count(){
                    return this.$store.state.count;
                }
            }
            模板调用：{{count}}

            缺点：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
        
        二、通过mapState的《对象》来赋值
            import {mapState} from 'vuex';
            然后还在computed计算属性里写如下代码：
                computed:mapState({
                    count:state=>state.count
                })

        三、通过mapState的《数组》来赋值
            computed:mapState(["count"])

 

3.Mutations修改state状态

1. mutations  相当于一个对象，对象里面放的是事件类型相对应的回调函数,作用就是进行状态更改;简单理解就相当于一个事件注册

    2. $store.commit()  //模板中调用mutations 里面的事件函数

    传值：只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了
        const mutations={
            add(state,n){
                state.count+=n;
            },
            reduce(state){
                state.count--;
            }
        }

        在XXX.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.
            <p>
                <button @click="$store.commit('add',10)">+</button>
                <button @click="$store.commit('reduce')">-</button>
            </p>
    
    
    模板获取Mutations方法
        实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。
        例如：@click=”reduce”   就和没引用vuex插件一样。
        要达到这种写法，只需要简单的两部就可以了：

        在模板XXX.vue里用import 引入我们的mapMutations：
            1.在模板XXX.vue里用import 引入我们的mapMutations：
                import { mapState,mapMutations } from 'vuex';

            2.在模板的script标签里添加methods属性，并加入mapMutations
                methods:mapMutations([
                    'add','reduce'
                ]),

            3.通过上面两步后调用（注意额外参数直接写上）
                <button @click="add(10)">+</button>

 

4.getters计算过滤操作

getters从表面是获得的意思,可以把他看作在《 获取数据之前 》进行的一种再编辑(注意模板显示getters操作后的值)
    相当于对数据的一个过滤和加工,可以把它看作store.js的计算属性(类似于computed)
    getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

    《1》基本用法：
        首先要在store.js里用const声明我们的getters属性。
            const getters = {
                count:function(state,getters){
                    return state.count +=getters.params_getter;
                },
                params_getter:function(){
                    return 1000
                }
            }
            参数：
                state : 
                getters : getters.xxx 来传递其他 getters 中的数据

        写好了gettters之后，我们还需要在Vuex.Store()里引入
            export default new Vuex.Store({
                state,mutations,getters
            })
        
        在store.js里的配置算是完成了，我们需要到模板页对computed进行配置
        在vue 的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用，
        所以要对computed属性进行一个改造。
        改造时我们使用ES6中的展开运算符”…”。
            computed:{
                ...mapState(["count"]), //相当于一个扩展
                count(){
                    return this.$store.getters.count;
                }
            }
        
    《2》用mapGetters简化模板写法：
        都知道state和mutations都有map的引用方法把我们模板中的编码进行简化，我们的getters也是有的
        首先用import引入我们的mapGetters
            import { mapState,mapMutations,mapGetters } from 'vuex';
        在computed属性中加入mapGetters
            ...mapGetters(["count"])

 

5.actions异步修改状态

actions和之前讲的Mutations功能基本一样
    不同点是，
        1.actions 提交的是 mutation，而不是直接变更状态。
        2.actions是异步的改变state状态，而Mutations是同步改变状态。

    在store.js中声明actions
        actions是可以调用Mutations里的方法的，在actions里调用add和reduce两个方法
        以下是事件注册的两种方式：
            const actions ={
                addAction(context){
                    context.commit('add',10)
                },
                reduceAction({commit}){
                    //由于context 与 store 实例具有相同方法和属性，所以可以提交mutation
                    commit('reduce')
                }
            }
        
        在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。
            context：上下文对象，这里你可以理解称store实例本身。
            {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
        
        
        模板中的使用
            <p>
                <button @click="addAction">+</button>
                <button @click="reduceAction">-</button>
            </p>
            改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入
            methods:{
                ...mapMutations([  
                    'add','reduce'
                ]),
                ...mapActions(['addAction','reduceAction'])
            }
        
            用import把我们的mapActions引入才可以使用
                import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';
        
        增加异步检验
            演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行
                setTimeOut(()=>{context.commit(reduce)},3000);
                console.log('我比reduce提前执行');

 

6.module模块组(状态管理器的模块组操作)

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。
    声明模块组：
        在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下：
            const moduleA = {
                state: { ... },
                mutations: { ... },
                actions: { ... },
                getters: { ... }
            }
            const moduleB = {
                state: { ... },
                mutations: { ... },
                actions: { ... }
            }
        声明好后，我们需要修改原来 Vuex.Stroe里的值：
            const store = new Vuex.Store({
                modules: {
                    a: moduleA,
                    b: moduleB
                }
            })
        
        store.state.a // -> moduleA 的状态
        store.state.b // -> moduleB 的状态
    
    在模板中使用:
        现在我们要在模板中使用count状态，要用插值的形式写入
            <h3>{{$store.state.a.count}}</h3>
        如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：
            computed:{
                count(){
                    return this.$store.state.a.count;
                }
            }