首页 > 代码库 > vuex demo

vuex demo

2024-10-22 15:48:02   210人阅读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="traceur.js"></script>
    <script src="BrowserSystem.js"></script>
    <script src="bootstrap.js"></script>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
</head>
<style>
    .abc{
        width:100px;height:100px;background-color:red;
    }
    
</style>
<script>
window.onload = function(){

    const store = new Vuex.Store({
          state: {
            todos: [
              { id: 1, text: ‘1...‘, done: true },
              { id: 2, text: ‘2...‘, done: false }
            ],
            cout:1,
          },
          getters: {
            doneTodos: state => {
              return state.todos.filter(todo => todo.done)
            },
            doneTodosCount: (state, getters) => {
                return getters.doneTodos.length;
            },
            coutt:state => state.cout,
          },
          mutations:{
            incre(state,n){
                state.cout += n.couts;
            }
          }
    })

    new Vue({
      el:"#app",
      computed:{
        c(){
            return store.getters.doneTodos;
        },
        e(){
            return store.getters.doneTodosCount;
        },
        coutt(){
            return store.getters.coutt;
        }
      },
      data(){
        return {
            d:store.getters.doneTodosCount,
            cout:store.getters.coutt,
        }
      },
      methods:{
        click(){
            store.commit(‘incre‘,{couts:100});
        }
      }
    })

    
}
</script>

<body>
<div id="app" @click=‘click‘>
{{c}},{{e}},{{coutt}},{{cout}}
</div>
</body>
</html>

 

vuex demo


联系
我们