vue-cli+webpack+router+vuex---之vuex使用

有信心的能夠去看官方的文檔

vue 的官方文檔有個顯著的特色---代碼粘貼不全

Vue中文站：cn.vuejs.org 
vue-router官方教程：router.vuejs.org/zh-cn 
vuex官方教程：vuex.vuejs.org/zh-cn

實例項目地址

https://git.oschina.net/rtdk/Rain-vuex.git

我默認你的vue-cli已經裝好了你會有這麼一個目錄

 

這裏不用我解釋了吧! <*_*>  若是還不會安裝vue-cli的能夠 去個人以前的博客觀看 vue腳手架---vue-cli  

如今開始準備工做

 

1-0 如今src目錄下建立store文件夾

 

1-1 在store文件夾下建立

 index.js      // 文件都會匯聚到這個地方來,也是建立store對象的地方,就像store的入口同樣

actions.js      //存放vuex的核心處理函數

getters.js      //工具接口爲了方便構建全局state自定義方法

mutations.js      //改版store中各類狀態的地方

rootState.js       //我參考一個大神的作法建立rootState.js保存頂層的數據

配置數據

2-0 src->store->index.js

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as mutations from './mutations';
import * as getters from './getters';
import state from './rootState';
Vue.use(Vuex)
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})
export default store;

2-1 src->main.js

將store對象掛載到main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-default/index.css'
import store from './store/index';

//element-ui使用
//Vue.use(ElementUI)


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

 

//一個實例

src->components->demo-vuex.vue

<template>
  <div>
    {{name}}
    <button @click="fun">點擊改變msg</button>
    <br>
    msg: {{msg}}
  </div>
</template>
<style scoped>

</style>
<script>
  import {mapGetters, mapActions} from 'vuex';
  export default{
    data(){
      return {
        name:"demo-vuex"
      }
    },
    computed: {...mapGetters(['msg'])},  //對應getters.技術中的msg
    methods: {...mapActions(['fun'])}   //對應 Actions中fun方法
  }
</script>

目的很簡單 點擊按鈕 改變msg的值

測試組件src->components->demo-vuex2.vue

<template>
    <div>
        {{msg}}
    </div>
</template>
<style scoped>

</style>
<script>
  import {mapGetters} from 'vuex';
    export default{
      data(){
        return {}
      },
      computed:{...mapGetters(['msg'])}

    }
</script>

該組件爲了查看是否實現組件間的傳值問題

路由配置 src->router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import Demo from 'components/demo-vuex'
import Demo2 from 'components/demo-vuex2'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/demo',
      name: 'demo',
      component: Demo
    },
    {
      path: '/demo2',
      name: 'demo2',
      component: Demo2
    }
  ]
})

 

 

 

src->store->rootState.js

const state = {
  msg: '我是原始數據',
}
export default state;

我把rootState.js當作數據初始化的地方 初始化msg 並暴露出state

 

src->store->actions.js

export const fun = ({commit}) => {
  commit({
    type: 'getMsg',     //對應mutation.js中的getMsg方法
    msg: '我是修改後的數據...'
  });
};

把將要修改的值發送到mutations.js中---值只容許在mutations.js中修改

 

src->store->mutations.js

export const getMsg = (state, payload) => {
  state.msg = payload.msg;
}

修改state.msg值 ,   payload.msg對應actions.js中傳過來的值

src->store->getters.js

export const msg = state => state.msg;

最簡單的服務 將值獲取再返回 

 

 

測試一下 對不對

 運行

npm run dev

瀏覽器輸入

http://localhost:8080/#/demo

看到一下界面

點擊後數據改變

從其餘組件測試一下

 瀏覽器輸入

http://localhost:8080/#/demo2   看看是不是改變後的數據