vue 腳手架安裝节视，這里我就不介紹了 說重點 !
安裝 vuex
npm install vuex --save
安裝成功后 ，現(xiàn)在我們就可以使用 vuex 了
先在src 目錄下建立 store 文件夾 假栓， 文件目錄如圖：
這里我先介紹下 每個文件的用處：
1 ： index.js 這里是個入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './store'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
把我們需要的文件 都引入里面 寻行，注入并導(dǎo)出！
2 : store.js 文件 匾荆，這是我們初始化數(shù)據(jù)的 拌蜘，也是之后我們存數(shù)據(jù)的地方，這里我先初始化一個 review 空的對象 棋凳！
const state = {
review: {}
}
export default state;
3：mutation-types.js 這里是我們存常量的 拦坠，方便我們之后在 mutations 里面調(diào)用 !
這里我先等一個常量為 ： SET_REVIEW
export const SET_REVIEW = "SET_REVIEW"
4：getters.js 這個你可以看著是個 vue 的計算屬性：
export const review = state => state.review
5：mutations.js ， 提交 mutations 是更改 vuex中 store 中狀態(tài)的 唯一方法
import * as types from './mutation-types'
const mutations = {
[types.SET_REVIEW](state, review) {
console.log("review", review)
state.review = review
},
}
export default mutations
6：action.js , Action 類似于 mutation剩岳，不同在于：Action 提交的是 mutation贞滨，而不是直接變更狀態(tài)。 Action 可以包含任意異步操作拍棕。
簡單的說 ： 它是 操作 mutations 的 晓铆，現(xiàn)實異步操作！
這里我是獲取數(shù)據(jù)绰播，暫時用不到 action.js
代碼比較簡單骄噪，我就直接貼了：
index.vue 首頁：
<!-- -->
<template>
<div>
<span @click="linkTo()">鏈接跳轉(zhuǎn)</span>
</div>
</template>
<script type='text/ecmascript-6'>
import { mapMutations } from "vuex";
export default {
data() {
return {};
},
mounted() {
this.getReviewData();
},
methods: {
getReviewData() {
let _this = this;
_this.$http
.get("api/review/needlist")
.then(function(response) {
console.log(response.data);
if (response.data.code === 0) {
let list = response.data.list;
_this.setReview(list);
}
})
.catch(function(error) {
console.log(error);
});
},
linkTo(){
this.$router.push({path:'review'});
},
...mapMutations({
setReview: "SET_REVIEW"
})
}
};
</script>
<style scoped>
</style>
這是vue 組件的 基本結(jié)構(gòu)
在 methods 寫個 獲取數(shù)據(jù)的方法 getReviewData() ！
在 mounted 生命周期里調(diào)用獲取數(shù)據(jù)方法
關(guān)鍵：
我們使用 vue 提供的語法糖 蠢箩，來把數(shù)據(jù)存到 store 里：
引入 vuex 的 mapMutations 方法
import { mapMutations } from "vuex";
在 methods 里面寫個 setReview 链蕊，它類似于 一個方法 事甜， 和我們調(diào)用 其他方法完全一致 ：
...mapMutations({
setReview: "SET_REVIEW"
})
最后我們把接口獲取的數(shù)據(jù) 傳入 這個方法中 ， 就完成了 數(shù)據(jù) 存入 store 里了 滔韵！
_this.setReview(list);
接下來逻谦，我們就可以使用 store 里面的數(shù)據(jù)了
下面我們來獲取 store 里面的數(shù)據(jù) ，
新建一個 review.vue 組件
上代碼 ：
<!-- -->
<template>
<div class="web">
<ul>
<li v-for="(item,index) in review" :key="index">
<span>{{item.content}}</span>
</li>
</ul>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
components: {
},
data () {
return {
};
},
computed:{
...mapGetters([
'review'
])
},
mounted() {
console.log(this.review);
},
methods: {}
}
</script>
<style scoped>
</style>
獲取數(shù)據(jù) 我們要引入 ：
import {mapGetters} from 'vuex'
在computed 生命周期里拿值
最后我們就可以渲染到頁面了 陪蜻！
最后上圖 ：
這里我們就可以在另一個頁面 拿到數(shù)據(jù)了了 邦马。
最后我們來說下 ： vuex 刷新 數(shù)據(jù)丟失問題 ；
這里我們用到了 localStorage本地存儲 宴卖。
我們可以在vue 組件里屬于 滋将， 在存數(shù)據(jù)的時候 同時也存到 localStorage 里面 。 在需要的地方 在從 localStorage 獲取 症昏！
這里我把 localStorage 放到 vuex 里面 随闽， 不用在每個組件 都存一遍
我們再 mutations.js里面存數(shù)據(jù)
localStorage.setItem('review', JSON.stringify(state.review));
在store.js 里面 加入以下代碼 ：
//防止頁面刷新vuex中的數(shù)據(jù)丟失
for (var item in state) {
localStorage.getItem(item) ? state[item] = JSON.parse(localStorage.getItem(item)) : false;
}
這里就解決了 我們vuex 刷新數(shù)據(jù) 丟失的問題了 ！
