VueX的使用

1，什么是Vuex

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库）， 让其在各个页面上实现数据的共享包括状态，并且可操作
   Vuex分成五个部分： 
   1.State：单一状态树
   2.Getters：状态获取
   3.Mutations：触发同步事件
   4.Actions：提交mutation，可以包含异步操作
   5.Module：将vuex进行分模块

1.2vueX安装

 npm install vuex -S

 npm i -S vuex@3.6.2

 1.3，创建store模块，分别创建state/actions/mutations/getters.js

1.4.在src/store/index.js中写入内容

新建vuex的store实例,并注册上面引入的各大模块

import Vue from "vue";
import Vuex from 'vuex'

import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

export default store

1.5.在src/main.js中导入并使用store实例

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from '@/api/http'
import VueAxios from 'vue-axios'
import router from './router'
import store from './store'

//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')

Vue.use(ElementUI);
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

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

1.6在views新建vuex目录,添加Page1.vue和Page2.vue文件

Page1.vue

<template>
  <div>
    <h1>这是页面1</h1>
  </div>
</template>

<script>
export default {
  name: "Page1"
}
</script>

<style scoped>

</style>

Page2.vue

<template>
  <div>
    <h1>这是页面2</h1>
  </div>
</template>

<script>
export default {
  name: "Page1"
}
</script>

<style scoped>

</style>

1.7.配置路由

修改src/router/index.js

import Page1 from '@/views/vuex/Page1'
import Page2 from '@/views/vuex/Page2'

#添加到与TopNav同级的地方
{
    path: '/vuex/Page1',
	name: 'Page1',
	component: Page1
},{
    path: '/vuex/Page2',
	name: 'Page2',
	component: Page2
}

1.8.修改components/LeftNav.vue

=====仅展示部分内容
<el-menu
    router :default-active="$route.path"
    default-active="2" class="el-menu-vertical-demo" background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    
    ///======添加的内容
    <el-menu-item
      index="/vuex/Page1"
      key="'key_999">
      <span>Vuex页面1</span>
    </el-menu-item>
    <el-menu-item
      index="/vuex/Page2"
      key="'key_1000">
      <span>Vuex页面2</span>
    </el-menu-item>

1.9效果

2.实例

修改src/store/state.js

export default {
  name: 'Vuex学习'
}

3.取值

3.1.state直接取值

修改src/views/vuex/Page1.vue

<template>
  <div>
    <h1>这是页面1========{{msg}}</h1>
    <p>state直接取值</p>
    <button @click="func1">state直接取值</button>
  </div>
</template>

<script>
export default {
  name: "Page1",
  data(){
    return{
      msg: null
    }
  },
  methods:{
    func1(){
      this.msg = this.$store.state.name;
    }
  }
}
</script>

<style scoped>

</style>

3.2效果

4.getters取值

4.1.修改src/store/getters.js

export default {
  getName(state){
    return state.name;
  }
}

4.2.修改Page1.vue

#div中添加
<p>getters取值</p>
<button @click="func2">getters取值</button>

#methods中添加
func2(){
	this.msg = this.$store.getters.getName;
}

4.3效果

5.mutations存值

5.1.修改mutations.js

export default {
  setName(state, payload) {
    state.name = payload.name;
  }
}

5.2修改page1.vue

#div中添加
<p>mutations存值</p>
<button @click="func3">mutations存值</button>

#methdos中添加
func3(){
	this.$store.commit('setName',{
		name: '这是修改后的Vuex学习'
	});
}

5.3修改page2.vue

<template>
  <div>
    <h1>这是页面2===={{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "Page2",
  data(){
    return{
      msg: null
    }
  },created() {
    this.msg = this.$store.state.name;
  }
}
</script>

<style scoped>

</style>

5.4效果

 

6.actions存值

6.1.修改Page1.vue,删除data中的msg,在data后面加computed属性

computed:{
    msg(){
        return this.$store.state.name;
    }
}

6.2.修改store/actions.js

export default {
  setNameAsync(context, payload) {
    //context指的是vuex的实例
    //等价于this.$store
    setTimeout(function () {
      context.commit('setName',payload);
    },6000)
  }
}

6.3.修改Page1.vue

#div中添加
<p>actions存值</p>
<button @click="func4">actions存值</button>

#methods中添加
func4(){
	this.$store.dispatch('setNameAsync',{
		name: '这是修改后的Vuex学习--action'
	});
}

6.4效果

7.发送ajax请求获取后台数据

7.1.修改api/action.js

'VUEX_INFO': '/vuex/queryVuex',//vuex异步获取数据

7.2.修改Page1.vue

#div中添加
<p>后台ajax改变值</p>
<button @click="func5">后台ajax改变值</button>

#methods中添加
func5(){
      this.$store.dispatch('setNameAjax',{
        _this: this
      });
    }

7.3.修改actions.js

export default {
  setNameAsync(context, payload) {
    //context指的是vuex的实例
    //等价于this.$store
    setTimeout(function () {
      context.commit('setName', payload);
    }, 3000)
  },
  setNameAjax(context, payload) {
    let _this = payload._this;
    let url = _this.axios.urls.VUEX_INFO;
    let params = {
      resturantName: '这是ajax的修改'
    }
    _this.axios.get(url, {params}).then(resp=>{
      if(resp.data.success){
        context.commit('setName',{
          name: resp.data.msg
        })
      }
    }).catch(err=>{

    })
  }
}

7.4效果