vuex详解

一、src目录下面新建一个vuex文件夹

二、vuex文件夹新建一个store.js文件

三、安装vuex

npm install vuex --save

四、在刚才创建的store.js引入vue 引入vuex并use vuex

import Vue form 'vue'
import Vuex form 'vuex'
Vue.use(Vuex)

五、定义数据 state

/* state在vuex中用于存储数据*/

var state={
    count=1,
}

六、定义方法 mutations

mutations 里面放的是方法，方法主要用于改变state里面的数据

var mutations ={
    inCount(){
        ++state.count;
    }
}

 

七、暴露实例

const store =new Vuex.Store({
    state,
    mutations
})
export default store;

八、组件里面使用vuex

1. 引入store

import store form '../vuex/store.js'

2. 注册

export defalut {
    data (){
        return {
            msg:'eeee'
        }
    },
    store,
    methods:{
        inCount(){
            //改变 vuex store里面的数据
            this.$store.commint('inCount'); //触发state里面的数据
        }
    }
}

3.获取state里面的数据

this.$store.state.数据

4.触发mutations 改变state里面的数据

this.$store.state.commit('inCount');

getters

类似计算属性。改变state里面的count数据的时候会触发getters里面的方法，获取新的值

getters:{
    doneTodoCount:(state,getters) =>{
        return getters.doneTodos.length
    }
}

store.js配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);


/*1.state在vuex中用于存储数据*/
var state={

    count:1,
    list:[]
}

/*2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={

    incCount(){

        ++state.count;
    },
    addList(state,data){

        state.list = data;
    }
}

/*3、优点类似计算属性 ，  改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/


var getters= {
   
    computedCount: (state) => {
        return state.count*2
    }
}




4. action

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
actions不能直接修改全局变量，需要调用commit方法来触发mutation中的方法
*/


var actions= {
    incMutationsCount(context) {    /*因此你可以调用 context.commit 提交一个 mutation*/
      
      
        context.commit('incCount');    /*执行 mutations 里面的incCount方法 改变state里面的数据*/


    }
}



//vuex  实例化 Vuex.store   注意暴露
const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})


export default store;

vuex中的getters和组件内computed很相似。那什么时候用vuex呢？

• 如果数据还有其他组件复用
• 需要跨多级组件传递数据
• 持久化的数据(如登录后用户的信息)
• 跟当前业务组件强相关的数据，可以放在组件内