VUEX使用

1、安装 vuex
    vue2    npm i vuex@3
 2、新建store文件夹，里边放置index.js,引入,使用，配置，注册，导出

import Vue from "vue"
import Vuex from "vuex" //引入vuex
Vue.use(Vuex) //使用vuex
 
export default new Vuex.Store({
    state:{
        num:"我是store中的数据",//实现参数传递的
    },
    mutations:{
 
    },
    actions:{
 
    },
    modules:{
 
    }
})
3、在main根上引入以上文件夹，并注册

    import Vue from "vue";
    import App from "./App";
    import store from "./store/index.js" //引入你新建的store文件
    Vue.config.productionTip=false;
    new Vue({
         el:"#app",
         store, //在根上注册store
         render:h=>h(App)
})

store下的index.js中
import Vue from 'vue'
import Vuex from 'vuex'
//配合actions使用
//在.vue组件文件中，才能有this.axios
//js文件中，用axios，只能单独引入
import axios from 'axios'
//把分隔出去的user引入回来
import {user_md} from './user'

export defaule new Vuex.Store({
    state:{
        usname:"马马",
        age:18,
        //存储新闻数据
        //acitons的调接口的数据存储
        //在vuex中发送请求后，数据通常是用于多组件共享的
        news_data:null
    },
    
    //修改state中值的方法防这里
    mutations:{
        //修改年龄的方法
        updateAge(state,payload){
            //payload:变量名随意，统称 载荷
            state.age=payload        
        },
        //修改state中的值必须用mutations的方法
        
        //更新新闻中的数据
        updateNewsData(state,payload){
            state.news_data=payload        
        }
    },
    
    //计算属性：利用state中已有的值，计算得到新的值
    getters:{
        //希望得到年龄乘2
        age_db(state){
            return state.age * 2        
        }  
    },
    
    //存放网络请求相关操作
    //统一储存所有组件的网络请求到一个文件中，方便后期维护
    //vuex中利用actions属性发送请求适合的场景：
    //请求的数据在多个组件中都要使用的场景
    //1.actions中添加方法，发送请求
    //2.state属性中添加属性保存请求的返回值
    //3.mutations属性中，添加方法更新state中的值
    //4.请求结束后，触发mutations中的方法来把请求得到的值更新到state中
    actions:{
        //获取新闻
            getNews(store,payload){
                //参数store:就是vuex的对象
                //payload:载荷,一些传参之类的
                console.log('store:',store);
                console.log('payload:',payload);
                let url='https://......'
                axios.get(url).then(res=>{
                    console.log(res)             
                    //触发mutations中的方法，必须用commit
                    store.commit('updateNewsData',res.data)
                })
            }
    },
    
    //大型项目：拆分模块时使用
    //在同级目录下新建(拆出去)一个user.js的文件
    modules:{
            //加载外部引入的子模块
            user_md
    }
    
})

Home.vue
<template>
    <div>
        //【state】vuex的state中的值使用时有两种方法
        //1.普通写法
        <div>{{$store.state}}</div>
        //2.辅助函数方式
        <div>{uname}</div>
        
        //【mutations】修改年龄
        //1.普通做法
        <button @click="changeAge">更新年龄:{{age}}</button>
        //2.辅助函数的方式
         <button @click="changeAge">更新年龄:{{age}}</button>
         
         //【getters】使年龄乘2
         //1.普通写法
         <div>计算属性:{{$store.getters.age_db}}</div>
         //2.辅助函数写法
         <div>{{age_db}}</div>
         
         //【actions】获取新闻 调用接口数据
         //1.普通写法
         <button @click="getData">请求接口数据</button>
         //2.辅助函数
         <button @click="getData">请求接口数据</button>
         //3.使用存储了接口数据的news_data
         <div  v-if="news_data">
             <div v-for="(item,index) in news_data.resault" :key=index>
                 <span>{{item.title}}</span>
             </div>
         </div>
         
         //分隔除去的模块又引入回来的，然后显示
         //1.展示分隔出去的state里的phone
         <div>phone:{{user_md.phone}}</div>
         //2.调用分隔除去的更新手机号的mutations里的方法
         <button @click='changePhone'>更新手机号</button>
    </div>
</template>
<script>
    //state辅助函数，mutations辅助函数，getters辅助函数,actions辅助函数
    import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    export default{
      //计算属性
        computed:{
            //state辅助函数
            //user_md是拆分除去然后引入回来的模块
            ...mapState(['uname','age','news_data','user_md'])  
              
            //getters辅助函数
            ...mapGetters(['age_db'])
                     
        },
      //方法
        methods:{
            //mutations辅助函数
            //修改年龄，分隔出去又引入回来的修改手机号码
            ...mapMutations(['updateAge','updatePhone'])
            //修改年龄
            changeAge(){
                //1.普通的方式
                this.$store.commit('updateAge',100)   
                //commit:触发 muttions 中的方法
                
                //辅助函数的方式
                2.this.updateAge(200)         
            },
            
            //修改手机号
            changePhone(){
                this.updatePhone('13218096701')            
            }
            
            //actions辅助函数
            ...mapActions('getNews')
            getData(){
                //以前发送请求：在组件中进行
                //现在把请求提取到vuex中发送  
                //参数2会传递到getNews的payload参数中，也可以不带参数
                //请求如果有参数可以通过传参的方式操作
                
                //1.普通的方式
                this.$store.dispatch('getNews',2)
                //dispatch:触发 actions 中的方法
                      
                //2.辅助函数的方式
                this.getNews(10)
            }
        }    
    }
</script>

About.vue
//state中的数据可以在别的页面中使用，例如使用存储了接口数据的news_data
//刚开始是没有数据的，只有你在Home.vue中点击了请求数据之后，news_data数据同步后About.vue界面才有数据
<template>
    <div>
         <template v-if="news_data">
             <div v-for="(item,index) in news_data.resault" :key=index>
                 <span>{{item.title}}</span>
             </div>
         </template>
    </div>
</template>
import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['news_data'])    
    }
}

User.js
//大型项目代码量多，则需要按照业务拆分成不同模块来存放代码
//例如此处分隔出：用户模块user
//写好了之后需要引入回index.js
export const user_md={
    state:{
        phone:'10086'    
    },
    mutations:{
        //更新手机号
        updatePhone(state,phone){
            state.phone=phone        
        }    
    },
    getters:{},
    actions:{},
    
}