状态管理工具

1

store文件夹里面有：

state共享数据源，

mutations 修改state里面的数据，只支持同步代码。

actions 不能直接修改state里面的数据，支持同步和异步的代码，需要通过他的第一个参数结构commit出来，然后提交mutations里面的方法修改vuex里面state的数据。

modules 对vuex进行模块拆分。

2：进行模块拆分在store里面新建文件夹modules/index.js里面进行抛出

const modules = {
  state: () => ({
    userInfo:{
       count:1
    }
  }),

   
  mutations: {
    updataInfo(state,val){
        // console.log(val);
      return state.userInfo.count++
    }
  },

  actions: {
    updataInfoActions({commit,state},val){
        console.log(state.userInfo);
        commit('updataInfo',val)
    }
  },

  // 命名空间
   namespaced: true,
}


export default modules

然后在到外面的store/index.js 里面的进行引入然后在modules进行挂载。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
import modules from './modules'
export default new Vuex.Store({
  state: {

  },

  mutations: {

  },

  actions: {

  },
  
  modules: {
    modules
  }
})

3 在home页面进行引入使用完成数字的加加

<template>
  <div class="home">
    {{userInfo.count}}
   <button @click="addprice">加加</button>
   <button @click="$router.push('/about')">about</button>
  </div>
</template>

<script>
// @ is an alias to /src
import {mapActions,mapState} from 'vuex'
export default {
  name: 'Home',
  components: {

  },
  computed:{
    ...mapState({
      userInfo:state=>state.modules.userInfo
     
    })
    
  },
  methods:{
    addprice(){
        this['modules/updataInfoActions']({ count:2 })
    },
    
     ...mapActions([
       'modules/updataInfoActions'
       ]),
  },
}