vue vuex学习

用vuex的好处

1、解决了不同组件的数据共享问题
2、组件里面的数据持久化

环境及项目搭建

下载node.js，安装之后在cmd里输入命令行
npm install webpack -g
安装vue-cli,输入命令行
npm install webpack -g vue-cli
使用命令 vue init webpack vue-demo 搭建vue项目, vue-demo”是你的项目名称。

安装vuex

使用命令：npm install vuex --save

vuex的使用

1、在src的目录下新建一个vuex的文件夹
2、在vuex下面新建一个store.js
直接把store.js里的代码贴上，里面有注释

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

Vue.use(Vuex);

//创建存储数据的仓库state,集中管理数据，相当于data，用语存储数据
const state={
     msg:"这是测试的",
     count:1,
     list:[]
}

//actions中的方法,这里面的方法都是异步操作
//页面上调用这个里面的方法，其实还是调用的下面mutations里的方法
//页面上调用这个里面的方法使用this.$store.dispatch()
const actions={
     setValue(context,res) {
        // console.log(res);
        context.commit('setData',res);
     }

}

//创建mutations，主要放的是方法，目的是能最终改变仓库中的数据，这里是同步操作
//页面上调用这里的方法使用this.$store.commit()
const mutations={
     //如果要传值必须加一个state
    setData(state,result) {
      state.msg=result;       
    },
    addcount(){
         ++state.count
    },

    //给list赋值
    setLlist(state,result){
         console.log("hhh"+result.length);
         state.list = state.list.concat(result);
    }
}   

//有点类似于计算属性  改变state里的count的值的时候会触发这里面的方法
const getters={
     computedcount:(state)=>{
          return state.count*2;
     }
}

//暴露出去，实例化
export default new Vuex.Store({
state,
actions,
mutations,
getters

})