详细的Vuex介绍

详细的Vuex介绍

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

安装：npm install vuex --save依赖：npm install启动：npm run dev

2、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。在store.js中

        引入：import Vue from 'vue';

       引入：import Vuex from 'vuex';

使用我们vuex，引入之后用Vue.use进行引用 Vue.use(Vuex);

3、通过这三步的操作，vuex就算引用成功了。

在main.js中引入

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store中index.js
Vue.config.productionTip = false
import Vuex from 'vuex'
Vue.use(Vuex)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store:store,
  components: { App },
  template: '<App/>'

})

4、

创建一个模块modules文件夹，在index.js下导入

导入各个模块的初始状态和 mutations
import Classify from './modules/Classify.js'
import Detail from './modules/Detail.js'

import Juti from './modules/Juti.js'

export default new Vuex.Store({
    // 组合各个模块
    modules: {
        Classify:Classify,
        Detail:Detail,
        Juti:Juti
    },
    //strict: debug,
    //moddlewares: debug ? [createLogger()] : []

})

5、例子：Classify.js中写逻辑代码

// src/vuex/modules/index.js

const state = {
    content:""
}


const mutations = {
   getData(state,_http) {
        _http.get('http://localhost/pHp/new_file.php').then(function(res){
        state.content=res.body;
    },function(){
        alert('请求失败处理');   //失败处理
    });
    }
}


export default {
    state,
    mutations

}

6、组件：

<template>
<div class="classify">
<div class="topInput">
<input type="test" name="" id="" value="" placeholder="满199减100"/>
</div>
<div class="foot">
<ul>
<li v-for="(item,index) in this.$store.state.Classify.content" v-on:click="detailClick"><img v-bind:src="item.img" width="200"/>
<span>{{item.name}}</span>
</li>
</ul>
</div>
</div>
</template>


<script>
var data={
content:""
}
export default {
  data:function() {
    return data;
  },
  created:function(){
  var _http=this.$http;
  this.$store.commit("getData",_http);
  },
  methods:{
  detailClick:function(){
 
  var _http=this.$http;
  this.$store.commit("getDetail",_http);
  this.$router.push({name:"Detail"});
  }
  }
}

</script>


<style>
.classify .topInput{
background-color: red;
padding: 15px 0;
position: fixed;
top: 0;
width: 100%;
}
.classify .topInput input{
width: 80%;
border-radius: 10px;
padding: 5px 0;
outline: none;
padding-left: 20px;
}
.classify .foot ul li {
display: inline-block;
width: 30%;
}
.classify .foot ul li img{
margin: auto;
}
/*当页面在480和767像素之间时,为超级小屏幕,主要是手机*/
@media only screen and (min-width: 480px) and (max-width: 640px) {
.classify .foot ul li {
display: inline-block;
width: 50%;

}
}
/*当页面在480像素一下,为小屏幕,分辨率更低的手机*/
@media only screen and (max-width: 479px) {
.classify .foot ul li {
display: inline-block;
width: 50%;
}
}
</style>