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 看看是否是改变后的数据

巴特西

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

最新文章

热门文章