vuex的使用方法和技巧

1.安装vuex

  npm install vuex --save

2.新建store.js文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
    // state为驱动应用的数据源
    state: {
        count:8,
        obj: {"kaiahi":"111"}
    },
    mutations: { //Vuex给我们提供修改仓库 store中状态的唯一办法就是通过提交mutation
        increment(state, value) {
            state.count += value;
        },
        getParam(state, Object) {
            //5.修改state中的数据
            state.obj = Object
        }
    },
    getters: { //  getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等
        newCount: state => state.count * 5
    },

    actions: {
        getParamSync(context, Object) { //通过异步请求改变state数据,而matution是同步操作的
            //处理异步操作
            setTimeout(() => {
                //3.通过commit提交一个名为getParam的mutation
                //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
                context.commit("getParam", Object)
            }, 500)
        }
    }

})

3.再main.js中引入vuex

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from "axios"
import store from './vuex/store'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);
Vue.prototype.$http = axios
Vue.prototype.$http = axios.create({
    headers: {
        "Content-Type": "application/json;charset=UTF-8"
    }, //后台需要格式配置
    baseURL: "/api/", //开发环境请求地址
    //baseURL: "https://www.baidu.com/", //生产环境请求地址
    transformRequest: [function(data) { //数据格式转换
        data = JSON.stringify(data)
        console.log(data)
        return data
    }]
});

var vue  = new Vue({
      router,
    store,
    render: h => h(App),
}).$mount('#app')

4.直接在组件中使用

<template>
    <div class="store">
        <h1>这是store页面</h1>
        <h3>{{count}}</h3>
        <h2 @click="upataCount()">点击改变state.count的值</h2>
        <h4>{{newCount}}</h4>
        <b>{{newCount1}}</b>
    </div>
</template>

<script>
    export default {
        name: 'store',
        data() {
            return {
                num: this.$route.meta.num,
                count: this.$store.state.count,
                newCount:this.$store.getters.newCount
            }
        },
        props: {
            msg: String
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            upataCount() {
                this.$store.commit("increment", 10); //调用vuex状态内方法改变原始值
                console.log(this.$store.state.count)
            }
        },
        watch: {
            '$store.state.count': { //监听的用法
                handler: function(val, oldval) {
                    this.count = val
                    console.log('val===' + val)
                    console.log('oldval===' + oldval)
                }
            },
            '$store.getters.newCount':{
                handler:function(val, oldval){
                    this.newCount = val
                    console.log('val===' + val)
                    console.log('oldval===' + oldval)
                }
            }
        },
        computed: { //计算属性的用法
            newCount1() {
                return this.count + this.newCount
            }
        },
    }
</script>
<style scoped>
    h3 {
        margin: 40px 0 0 !important;
    }

    a {
        color: #42b983;
    }
</style>