首页 > 代码库 > vuex

vuex

2024-09-16 20:23:21   216人阅读

App.vue部分

<template>
  <div id="app">
    <input type="button"  value="增加" @click=‘increment‘ />
    <input type="button"  value="减少" @click=‘decrement‘ />
    <input type="button"  value="偶数才能增加" @click=‘clickOdd‘ />
    <input type="button"  value="异步请求" @click=‘clickAsync‘ />
    <div>
          现在的数字为：{{count}},他现在是{{getOdd}}
      </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from ‘vuex‘
export default {
  name: ‘app‘,
  computed:mapGetters([
      ‘count‘,
      ‘getOdd‘
  ]),
  methods:mapActions([
      ‘increment‘,
      ‘decrement‘,
      ‘clickOdd‘,
      ‘clickAsync‘
  ])
}
</script>

main.js部分

import Vue from ‘vue‘
import App from ‘./App.vue‘

import store from ‘./store.js‘


new Vue({
    store,
  el: ‘#app‘,
  render: h => h(App)
})

建一个store.js文件

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

var state = {
    count:10
}

const mutations = {// 处理状态（数据）的变化
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    }
}

const actions = {
    increment: ({// 处理你要干什么，异步请求，判断，流程控制
        commit
    }) => {
        console.log(commit);
        commit(‘increment‘)
    },
    decrement:({commit})=>{
        commit(‘decrement‘)
    },
    clickOdd:({commit,state})=>{
        if(state.count%2==0){
            commit(‘increment‘)
        }
    },
    clickAsync:({commit})=>{
        new Promise((resolve) => {
            setTimeout(function(){
                commit(‘increment‘);
                resolve();
            },1000);
        })
    }
}

const getters={
    count(state){
        return state.count;
    },
    getOdd(state){
        return state.count%2==0?‘偶数‘:‘奇数‘;
    }
}

//导出store对象
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

下面是官方推荐的目录存放

技术分享

 

 思路图

技术分享

 然后下面是按官方建的各个文件的内容

首先是App.vue

<template>
  <div id="app">
    <input type="button"  value="增加" @click=‘increment‘ />
    <input type="button"  value="减少" @click=‘decrement‘ />
    <input type="button"  value="偶数才能增加" @click=‘clickOdd‘ />
    <input type="button"  value="异步请求" @click=‘clickAsync‘ />
    <div>
          现在的数字为：{{count}},他现在是{{getOdd}}
      </div>
  </div>
</template>

<script>
import {mapGetters, mapActions} from ‘vuex‘
export default {
  name: ‘app‘,
  computed:mapGetters([
      ‘count‘,
      ‘getOdd‘
  ]),
  methods:mapActions([
      ‘increment‘,
      ‘decrement‘,
      ‘clickOdd‘,
      ‘clickAsync‘
  ])
}
</script>

 

 main.js

import Vue from ‘vue‘
import App from ‘./App.vue‘

import store from ‘./store/‘


new Vue({
    store,
  el: ‘#app‘,
  render: h => h(App)
})

index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex);

import mutations from ‘./mutations‘
import actions from ‘./actions‘

//导出
export default new Vuex.Store({
    modules:{
        mutations
    },
    actions
})

actions.js

import * as types from ‘./types‘

export default {
    increment:({commit}) => {
        commit(types.INCREMENT)
    },
    decrement:({commit}) => {
        commit(types.DECREMENT)
    },
    clickOdd:({commit,state}) => {
        if(state.mutations.count%2==0){
            commit(types.INCREMENT)
        }
    },
    clickAsync:({commit}) => {
        new Promise((resoLve)=>{
            setTimeout(function(){
                commit(types.INCREMENT)
            },1000)
        })
    }
}

mutations.js

import {INCREMENT,DECREMENT} from ‘./types‘

import getters from ‘./getters‘
const state = {
    count:20
}

//接收
const mutations = {
    [INCREMENT](state){
        state.count++;
    },
    [DECREMENT](state){
        state.count--;
    }
}

//导出数据
export default{
    state,
    mutations,
    getters
}

getters.js

export default{
    count:(state)=>{
        return state.count
    },
    getOdd:(state)=>{
        return state.count%2==0?‘偶数‘:‘奇数‘
    }
}

types.js

export const INCREMENT = ‘INCREMENT‘;
export const DECREMENT = ‘DECREMENT‘;

 

vuex


联系
我们