vuex的简单练习

参考：vuex
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="always" name="referrer">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <span>count:{{this.$store.state.count}}</span>
        <span>点击次数:{{clickCount}}</span>
        <button @click='addOne'>增一</button>
        <ul>
            <template v-for='item in this.$store.getters.todoList'>
                <li>{{item.name}}</li>
            </template>
        </ul>
    </div>

    <script type="text/javascript">
        // import { mapState } from 'vuex';

        Vue.use(Vuex);

        const store = new Vuex.Store({
            state:{
                count:0,
                todos : [
                    {id:1,name:'eat'},
                    {id:2,name:'sleep'},
                    {id:3,name:'speak'},
                    {id:4,name:'play'}
                ]
            },
            getters:{
                todoList : _state => {
                    return _state.todos.filter(function(item,index,arr){
                        return item.id > 2;
                    });
                }
            },
            //mutations只处理同步方法（不是说不能处理异步，只是异步不利于调试等等）
            mutations:{
                increment(_state,step){
                    _state.count += step;
                }
            },
            //mutations和actions的不同之处在于
            //1.Action提交的是mutation，而不是直接更改状态
            //2.Action可以包含任意异步操作
            actions : {
                //使用参数结构来简化代码:var {p,q} = {p:42,q:true}
                //incrementAction({commit}){
                //  commit('increment');
                //}
                incrementAction(context,p){
                    //context是一个类似于store的对象，使用它可以直接调用store下的内容
                    //但context并不是store
                    context.commit('increment',p.step);
                }
            }
        });

        const vue = new Vue({
            store,
            el:'#app',
            data(){
                return {
                    message:'测试vuex',
                }
            },
            // computed : {
            //  clickCount(){
            //      return store.state.count;
            //  }
            // },
            computed : {
                test(){},
                //使用扩展运算符进行混入
                ...Vuex.mapState({
                    //箭头函数
                    //clickCount: state => state.count,
                    clickCount : 'count'
                    //如果需要使用到this，则需要使用原始function方法
                    //clickCount(state){return state.count;}
                }),
                //使用混入方式，进行getters注入
                ...Vuex.mapGetters({

                })
            },
            methods:{
                addOne(){
                    //store.state.count++;这样也可以达到效果，但是不提倡
                    //提交mutation
                    store.commit('increment',10);

                    //分发action
                    //action的分发和mutation的提交极其相似
                    //支持如下对象方式，或者('incrementAction',{})或者('incrementAction',4)
                    store.dispatch({
                        type:'incrementAction',
                        step:4
                    });

                }
            }
        });
    </script>
</body>
</html>
猜你喜欢
