Vuex实战：状态管理与数据持久化-CSDN博客

VUE快速上手（五）

Vuex的使用

Vuex的使用

什么是Vuex

官网中的解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来讲，Vuex的目的就是，其一，实现多个组件之间共享数据的功能，即便这些组件不是父子组件，甚至也不是非父子组件，例如一些组件只是通过路由挂载到根组件上；其二，实现组件中数据的持久化。

注意：

Vuex适用于大型项目，如果是小型项目不建议使用。
Vuex能实现的功能，LocalStorege和SessionStorage也可以实现。

使用步骤

安装vuex：cnpm install vuex --save
在src目录下面新建一个vuex的文件夹，vuex 文件夹里面新建一个store.js

在刚才创建的store.js引入vue 引入vuex 并且使用vuex

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

定义数据，state和mutations的使用
store.js

// state在vuex中用于存储数据
var state={
    count: 1
}
// 定义方法，mutations里面放的是方法，方法主要用于改变state里面的数据
var mutations={
	incCount(){
		++state.count
	}
}
const store = new Vuex.Store({
	state,// state: state 的简写形式
	mutations
})
export default store

在组件中引入 store.js：import store from '../vuex/store.js'，并且注册store

<script>
import VueEvent from "../model/VueEvent.js"
import store from "../vuex/store.js"
export default {
  name: "home",
  data() {
    return {
      msg: "Home组件中的数据"
    }
  },
  store,
  methods: {
    incCountInStore() {
      this.$store.commit('incCount') /* 触发state里面的数据 */
    }
  }
};
</script>

获取state里面的数据：this.$store.state.数据
Home组件中：

<template>
  <div id="home">
    <h2>Home组件 --- {{this.$store.state.count}}</h2>
    <button @click="incCountInStore()">增加vuex中的数据</button>
  </div>
</template>

News组件中：

<template>
    <div id="news">
        <h2>News组件</h2>
        <div>vuex中的count：{{this.$store.state.count}}</div>
    </div>
</template>

点击Home组件中的按钮时，可以看到vuex中的数据改变了，此时切换到News组件，页面中的数据也做了同步的改变，这样就实现了各组件中的数据共享。
在这里插入图片描述

getters的使用
在store.js中追加getters并对外暴露：

/* 当state中的数据发生改变时，会触发getters中的方法 */
var getters = {
  computeCount: (state) => {
    return state.count * 3 
  }
}
const store = new Vuex.Store({
  state,
  mutations,
  getters
})

在Home组件中通过this.$store.getters.getters中的方法名获取数据

<div>getter中的computeCount: {{this.$store.getters.computeCount}}				</div>

然后改变state中的数据时，可以看到触发了getters中的方法。
在这里插入图片描述

actions的使用
同样的，在store.js中定义actions并对外暴露：

/* 执行mutations里的方法，改变state里的数据 */
var actions = {
  incMutationCount(context) {
    context.commit('incCount')
  }
}

此处在News组件中定义方法通过this.$store.dispatch('actions中的方法名')触发actions：

<template>
    <div id="news">
        <h2>News组件</h2>
        <div>vuex中的count：{{this.$store.state.count}}</div>
        <button @click="incCount()">触发actions中的方法</button>
    </div>
</template>
<script>
import store from '../vuex/store.js'
export default {
    name: "news",
    data() {
        return {
            newsList: ['新闻1', '新闻2', '新闻3']
        }
    },
    store,
    methods: {
       incCount(){
           this.$store.dispatch('incMutationCount')
       }
    }
}
</script>

此时点击按钮，触发方法，可以看到state中的count发生了改变，切换到Home组件，对应的数据也发生了改变。
在这里插入图片描述

使用vuex实现数据的持久化

在页面加载内容的时候，我们不希望每次切换到页面都请求数据，此时可以利用vuex对请求的数据进行持久化，每次加载时，从vuex中获取数据。

实现步骤：

首先在store.js中定义属性和方法：

var state = {
  newsList: []
}
var mutations = {
  /* 更新state中的newsList，注意：如果需要传参，需要定义参数state和data，此处的data为需要传入的参数名 */
  addNewsList(state, data) {
    state.newsList = data
  }
}

在组件中定义方法请求数据并将数据放入store中

<template>
    <div id="news">
        <h2>News组件</h2>
        <ul>
            <li v-for="item in newsList">
                {{item.title}}
            </li>
        </ul>
    </div>
</template>
<script>
import store from '../vuex/store.js'
import Axios from 'axios'
export default {
    name: "news",
    data() {
        return {
            newsList: []
        }
    },
    store,
    methods: {
       getNews() {
           var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
           Axios.get(url).then( (response) => {
                console.log(response)
                this.newsList = response.data.result
                this.$store.commit('addNewsList', response.data.result)
            }).catch( (err) => {
                console.log(err)
            })
       }
    },
    mounted() {
    	//先判断store中是否有数据，没有则请求，如果有则直接加载
        var newsListStore = this.$store.state.newsList
        if (newsListStore.length == 0) {
            this.getNews()
        } else {
            this.newsList = newsListStore
        }
    }
}
</script>