最简单的Vuex示例

╰+哭是因爲堅強的太久メ 2022-06-05 06:18 186阅读 0赞

# 最简单的Vuex示例 #

学习Vuex，弄个最简单的例子备忘一下，mapGetters, mapActions, mapMutations, state都用到了。

1.老规矩，vue-cli脚手架来一下

vue init webpack-simple testvue

找到main.js，改一下内容

import Vue from 'vue'
    import App from './App'
    import Vuex from 'vuex'
    import store from './vuex/store'
    Vue.use(Vuex)
    new Vue({
      el: '#app',
      store,
      render: h => h(App)
    })

2.在src下创建 src/components/count.vue文件，内容 如下

<template> <div> <h2>{ { msg}}</h2> <hr/> <h3>{ {$store.state.a.count}}</h3> </div> </template> <script> import store from '../vuex/store' export default{ data(){ return{ msg:'Hello Vuex', } }, store } </script>

3.在src/App.vue中的代码如下，这里button刻意用了不同的表达式测试，另外count1还加入了模块moduleA，所以会表达成store.state.a.count1的样式，如果不用模块，就要表达成  s t o r e . s t a t e . a . c o u n t 1 的 样 式 ， 如 果 不 用 模 块 ， 就 要 表 达 成 store.state.count1。用 countval引入了上面的count.vue文件。另外，这里add用了表达式$store.commit(‘add’,10)，所以在后面的store.js中无需在actions中commit了。

<template> <div> <p>App vue</p> <p>{ { msg}}</p> <button @click="$store.commit('add',10)">+</button> <button @click="reduce">-</button> <button @click="addAction">action+</button> <button @click="reduceAction">action-</button> <p>this is a getters count value: { {$store.getters.count}}</p> <p>this is a state count value: { {$store.state.a.count1}}</p> <countval></countval> </div> </template> <script> import countval from './components/count' import {mapState, mapGetters, mapActions, mapMutations} from 'vuex' //use commit export default { 　　name: 'app', 　　data () { 　　　　return { 　　　　　　msg: 'Welcome to Your Vue.js App' 　　　　} 　　}, computed:{ ...mapGetters(['count']), ...mapState(['count1']) }, methods: { ...mapMutations([ 'add', 'reduce' ]), ...mapActions([ 'addAction', 'reduceAction' ]) }, 　　 components: { countval, } } </script>

4.创建src/vuex/store.js文件，内容如下，

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const state ={
      count:0,
      count1:0
    }
    
    const mutations = {   
        add(state,n){
          state.count+=n;
          state.count1 += 1;
        },
        reduce(state){  //step1 needed
          state.count-=1;
          state.count1 -= 1;
        }
    }
    
    const actions ={
      reduce:({commit}) => commit('reduce'),
      addAction(context){
                //注意这里对reduce 进行了一次操作，会额外引发getters操作+100
                setTimeout(()=>{context.commit('reduce')},3000); console.log('我比reduce提前执行'); context.commit('add',10) }, reduceAction({commit}){ commit('reduce') } } const getters={ //对count的属性进行操作，只要count有任何变化，结果都会+100 count:function(state){ return state.count +=100; } } const moduleA={ state,mutations,getters,actions } const store = new Vuex.Store({ //不用moduleA的话，就用下面这行 //state, mutations, actions, getters //用moduleA的话，就是 modules:{a:moduleA} //也就是count.vue中的$store.state.a.count }) export default store

5.如果上述文件都正确的话，在cmd中敲入npm run dev字样，就会出现以下界面

![这里写图片描述][SouthEast]

点击Action+一次，会出现

![这里写图片描述][SouthEast 1]

再点击Action-一次，会出现  
![这里写图片描述][SouthEast 2]

好了，慢慢玩吧！

[SouthEast]: /images/20220605/75d9b3a6ba6b4b45acdce5f249213c7c.png
[SouthEast 1]: /images/20220605/0a78f5f8d51a49188f6754fa0c88992a.png
[SouthEast 2]: /images/20220605/fbca1fa9fa7c43089682eae0d2f7dfcc.png