Vuex介紹：
? ? ?Vuex官網(wǎng)：http://vuex.vuejs.org/
? ? ?Vuex是實現(xiàn)數(shù)據(jù)狀態(tài)管理的技術(shù)驳糯，它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)欣尼，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化屹耐。
? ? ?Vuex適用場景：適用大型復(fù)雜的vue項目棍厂。
Vuex使用：
? ? ?第一步：安裝vuex命令：npm install vuex --save
? ? ?第二步：在src目錄下創(chuàng)建一個store目錄僧诚，并在其中創(chuàng)建index.js文件
? ? ? ? ? ? ? ? ? ? 添加如下代碼：
? ? ? ? ? ? ? ? ? ? import Vue from 'vue'
? ? ? ? ? ? ? ? ? ? import VueX from 'vuex'
? ? ? ? ? ? ? ? ? ? import state from './state'
? ? ? ? ? ? ? ? ? ? Vue.use(VueX)
? ? ? ? ? ? ? ? ? ? export default new VueX.Store({
? ? ? ? ? ? ? ? ? ? ? ? ?state,
? ? ? ? ? ? ? ? ? ? ? ? ?mutations
? ? ? ? ? ? ? ? ? ? })
? ? ?第三步：在store目錄下創(chuàng)建state.js文件
? ? ? ? ? ? ? ? ? ? 添加如下代碼：
? ? ? ? ? ? ? ? ? ? export default {
? ? ? ? ? ? ? ? ? ? ? ? //userinfo為模擬數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? userinfo:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name:"1504",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?email:"1504@126.com",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?company:"百度",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?address:"北京海淀"
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? }
? ? ?第四步：在入口文件main.js引入store
? ? ? ? ? ? ? ? ? ? //引入store
? ? ? ? ? ? ? ? ? ? import store from './store'
? ? ? ? ? ? ? ? ? ? new Vue({
? ? ? ? ? ? ? ? ? ? ? ? ?......
? ? ? ? ? ? ? ? ? ? ? ? ?store
? ? ? ? ? ? ? ? ? ? })
? ? ?第五步：在各組件中如何使用vuex
? ? ? ? ? ? ? ? ? ? 通過在computed計算屬性中訪問this.$store.state.數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? 例如：
? ? ? ? ? ? ? ? ? ? //渲染vuex里面的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? computed:{
? ? ? ? ? ? ? ? ? ? ? ? ?info(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return this.$store.state.userinfo
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? }
Vuex修改數(shù)據(jù)：
? ? ?1某饰、比較簡單的方式：
? ? ? ? ? view組件提交mutations通過commit傳值
? ? ? ? ? 例如：this.$store.commit('MODIFY',name)
? ? ? ? ? mutations對象接收數(shù)據(jù)方式
? ? ? ? ? 例如：
? ? ? ? ? ? ? ? ? ?const mutations={
? ? ? ? ? ? ? ? ? ? ? ? ?MODIFY(state, value) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? state.userinfo.name= value
? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ?}
? ? ?2、比較官方的方式：
? ? ? ? ? ?view->actions->mutations->state->view
? ? ? ? ? ?view通過dispatch提交到actions剃袍，actions通過commit提交到mutations黄刚，并最終修改state中的數(shù)據(jù)，來達(dá)到視圖更新民效。為了簡化vuex相關(guān)方法憔维，讓你少敲幾個字母涛救，提高開發(fā)體驗
? ? ? ? ? ?view組件提交通過dispatch發(fā)送到actions
? ? ? ? ? ?例如：this.$store.dispatch('go',name)
? ? ? ? ? ?actions對象接收數(shù)據(jù)方式：
? ? ? ? ? ?例如：
? ? ? ? ? ? ? ? ? ? ? const actions={
? ? ? ? ? ? ? ? ? ? ? ? ? ?go({commit,state},value){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //actions通過commit提交到mutations
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? commit(“MODIFY”,value)
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? const mutations={
? ? ? ? ? ? ? ? ? ? ? ? ? ?MODIFY(state, value) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? state.userinfo.name= value
? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? }
