vuex的使用

下载安装配置    

npm install vuex --save

创建一个store文件夹 ，在里面创建store.js文件

//store.js里面

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

const store=new Vuex.Store({
　　//
})

export default store

需要把这个对象导出，在main文件里面引用  

import store from "./store/store"
并且挂载到

new Vue({
　　store
})

介绍：

state:{}, 等同于组件里面的data是放数据的
　　　　-存放状态(共享数据)在组件里面使用 this.$store.state.属性名
mutations:{}, 等同于组件里面的methods
　　　　-可以放一些方法和改变state里面的状态(数据)
　　　　定义一个方法，在组件里面使用this.$store.commit('方法名')触发这个方法
getters:{}, 等同于组件里面的computed
　　　　-等同于计算属性，可以把一些组件公用的计算方法放在该对象里面

例子：

getters:{
  bb(){
    var that=this;
    var newArr=[];
    that.state.stus.filter((item)=>newArr.push(item.age>21)) //这个箭头函数有返回值
  }
}

调用

this.num=this.$store.getters("bb")

 

actions:{},
　　　　-有一些异步操作的代码放在这里面
　　　　通过 content.commit()触发mutations里面的方法
　　　　并且在组件里面使用this.$store.dispatch('ascyonPmsg')来触发该对象里面的方法

 

　

mutations: {
  changePmsg(state){
    //异步的代码要放到actions里面去进行改变
    state.pmsg = "改变后的数据啊呵呵"
  }
},　

actions: {
  //content 上下文
  ascyonPmsg(content){
    setTimeout(function () {
      content.commit('changePmsg')
    },1000)
  }
},

调用

this.$store.dispatch('ascyonPmsg')

modules:{}
　　　　-可以继续因为当项目很大时候，store里面会存储很多数据状态以及一些方法，不方便管理，
modules可以将store 继续分割模块，方便管理 （注：小项目基本不用）

modules: {
  a:{
    state:{
      name:'张三',
      age:13
    },
    mutations:{},
    actions:{},
    getters:{}
  },
  b:{}
}

调用 this.$store.state.a.name