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

標籤：cti   bpa   vue-cli   點擊   允許   瀏覽器   image   全域   port   

有信心的可以去看官方的文檔

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

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

我預設你的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   看看是否是改變後的資料

 

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