Vuex

应用于大型项目,单页面没必要使用,想要的页面效果没法实现,可以用vuex实现

在main.js注册

import store from '/store'

new Vue({

store//全局注册store ,在vue任意组件内通过this.$store访问vuex

})

1.在store文件夹加中,创建index.js

在index.js中引入vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let store=new Vuex.Store({

state,

mutations,

actions,

getters

})

2.创建state.js 保存全局变量和数据 ,并在文件中 export default {

data1:[]

}

3.创建actions.js 接收需要改变的全局方法和ajax   需要导入axios  和通过解构的变量 import {SETDATA1} from   './mutations-type'

export default {

async requestData1({commit}){
       let url=''

       let result =await axios.get(url)

        console.log(result)

        commit(SETDATA1,result)

   }

}

4.创建mutations.js  通过解构的变量 import {SETDATA1} from   './mutations-type'

export default{

     [SETDATA1](state,data){
    state.data1=data

     }

}

5.创建mutations-type.js

export const SETDATA1='setdata1'//设置data1

6.创建getters.js 计算属性 ,对状态计算 导出 export default{}