vuex 使用方法

Posted 2020-10-01 狗哥

1、安装vuex扩展 : npm install vuex

2、在componets目录下新建 store.js 文件 

import Vue from \'vue\' 
import Vuex from \'vuex\'

Vue.use(Vuex)

// 定义初始值
const state = {
    num: 0
}

// 获取变量值
const getters = {
    num: state => state.num
}

//定义触发状态对象方法,传入state整个对象
//在页面中触发时使用this.$store.commit(\'mutationName\') 触发Mutations方法改变state的值
const mutations = {
    plus(state, num) {
        state.num += num;
    },
    minus(state, num) {
        state.num -= num;
    }
}

//异步执行方法，传入参数context，等同于整个store
//处理Mutations中已经写好的方法 在页面中触发方式是 this.$store.dispatch(actionName)
const actions = {
    plus({commit}, num) {
        // 调用mutations 方法
        commit(\'plus\', num)
    },
    minus({commit}, num) {
        commit(\'minus\', num)
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})


/**
 * 定义多个模块
 * 定义一个模块，引入各个状态对象或方法
 */

// Const moduleA = {     
//     state,
//     mutations,
//     getters,
//     actions
// }


/**
 * 引如多个模块
 */
// export default new Vuex.Store ({     
//     modules : {
//         a : moduleA     //引入定义模块
//     }
// })

　　属性值介绍：

　　state:定义初始值

　　getters:获取变量值

　　mutations: 定义触发状态对象方法,传入state整个对象,在页面中触发时使用this.$store.commit(\'mutationName\') 触发Mutations方法改变state的值

　　actions:异步执行方法，传入参数context，等同于整个store,处理Mutations中已经写好的方法 在页面中触发方式是 this.$store.dispatch(actionName)

3、在main.js 里添加引入store.js 代码

// 引入sotre.js
import store from \'./components/store.js\'

new Vue({
    store,　　// store对象
    el: \'#app\',
    router,
    render: h => h(App)
});

4、新建 TestVuex.vue 

<template>
    <div class="testVuex">
        <div>{{num}}</div>
        <button @click="plus">加2</button>
        <button @click="minus">加3</button>
    </div>

</template>

<script>

import {mapGetters} from \'vuex\'

export default {
    name: \'testVuex\',
    //computed 实时计算 Vue检测到数据发生变动时就会执行对相应数据有引用的函数。
    computed: {
        ...mapGetters([
            \'num\' // store.js 里定义num值
        ])
    },
    methods:{
      // 调用store.js 里actions定义的方法
      plus:function() {
        this.$store.dispatch(\'plus\', 2);
      },
      minus:function() {
        this.$store.dispatch(\'minus\', 3);
      }
    },
    data () {
      return {
      }
    }
}

</script>

5、效果预览