关于Vuex的理解

562 阅读1分钟
由于最近公司有用到Vuex,就查找了一些关于Vuex的相关资料(借鉴网上资料)加上自己理解,总结了自己对Vuex的一些理解。 官网解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管


顶层仓库。 

1.安装Vuex

npm install vuex --save
2.在src的统计目录下建一个名字为store的文件夹,在store的文件夹中建一个名为index.js的文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({   name: "store",   state: {      counte: 1   }})  //导出

3.在main.js中引入

在全局引入之后,就能够在全局使用this.$store.state来获取state中的内容了。如

console.log(this.$store.state.counte) //1

import store from "./store/index.js";//引入store
new Vue({  el: "#app", 
 router, 
 store, //全局注入
 template: "<App/>", 
 components: {    App  } });

4.getter监听state的变化

      做完上面的步骤,你已经可以用this.$sore.state.counte来获取state里面的数据的值了,但是并不能实时的更新state的数据,Vuex官方提供了一个getters,与computed一样,来监听state相关信息的变化。

import Vue from 'vue';
import Vuex from 'vuex'Vue.use(Vuex);
//导出export default new Vuex.Store(
{name: "store",
  state:{heser: '',//初始值
 footer: ''    }, 
//负责动态监听state的变化   
 gettes: {        //函数的名字随便起,主要用来承载state的值HeaderState(state) {
 return state.heser},
FooterState(state) {return state.footer}}})

5.mutation 用来改变初始值

```import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//导出export default new Vuex.Store({
            name: "store",
            state: {   
            heser: '',//初始值  
            footer: '',  
            num: 0
            },            //负责动态监听state的变化
              gettes: {    //函数的名字随便起,主要用来承载state的值
                     HeaderState(state) {        return state.heser    }, 
                     FooterState(state) {        return state.footer    },    
                     changeNum(state) {        return state.num    }
          },
                       
   //负责改变state的初始值
    mutations: {
        showheader(state) {
            state.heser = true;
        },
        hideheader(state) {
            state.heser = false;
        },
        //payload是参数
        changeNumstate(state, payload) {
            state.num = state.num + payload
        }
    },
})

 6.action 处理异步请求
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
//导出
export default new Vuex.Store({
    name: "store",
    state: {
        heser: '',//初始值
        footer: '',
        num: 0
    },
    //负责动态监听state的变化
    gettes: {
        //函数的名字随便起,主要用来承载state的值
        HeaderState(state) {
            return state.heser
        },
        FooterState(state) {
            return state.footer
        },
        changeNum(state) {
            return state.num
        }
    },
    //负责改变state的初始值
    mutations: {
        showheader(state) {
            state.heser = true;
        },
        hideheader(state) {
            state.heser = false;
        },
        //payload是参数
        changeNumstate(state, payload) {
            state.num = state.num + payload
        }
    },
    //此时,在组件内就可以通过this.$store.state.commit("showheader")获取state仓库的值了
    //action进行异步处理
    actions: {
        showheaders(state){
            state.commit('showheader')
        },
        //函数名可以随便起,但是commit的参数要和mutations的函数名称相同
        changeNum(state,num){
            state.commit('changeNumstate',num)
        },
    }
//   此时在组件内部,可以通过this.$stroe.dispatch("showheaders")获取state的值 this.$store.changeNum("changeNum",5)来更改state的值
})