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

Posted 2020-09-02

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

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