vuex简单的数据操作及vue项目搭建全过程

一:项目搭建

1.安装npm
2.安装yarn
3.安装vue-cli
4.执行命令vue init webpack vue-demo(vue-demo即是项目名)
5.cd vue-demo进入vue-demo文件夹
6.yarn dev

二：项目搭建好后如图目录结构

三：路由操作

在router文件夹下index.js中引入页面
如图：

四:vuex使用

1.安装
    yarn add vuex
2.入口文件引用vuex

3.在src文件夹下创建文件夹store作为vue目录，内建state.js,mutations.js,actions.js以及index.js如下图
    actions文件里主要写异步逻辑
    Mutations文件里主要更改状态，而且过程同步的
    State文件里存放状态

4.index.js里引入vue,vuex并使用，同时引入state,mutations,actions并抛出export default new Vuex.Store({state,mutations,actions})

5.State.js文件里定义状态并抛出
    const state={datas=0} export default state

6.mutations.js文件里定义更改状态事件并抛出，抛出同state.js
    const mutations={reduceData(state,data){state.datas-=1}，
        addData(state,data){state.datas-=1}
    }

7.actions.js文件里定义异步状态提交mutations并抛出同state.js
Const actions={
    reduceData({commit},params){
        async function reduce(params){
        //let res=await axios.post（“url”,params）此行是请求后台数据axios方法，本次是模拟。
        let res=params
        return res
        }
        reduce(params).then(res=>{
            let data=res
            commit(“reduceData”,data)//此行是提交mutations
        })
    }
    addData({commit},params){
        async function add(params){
        let res=params
        return res
        }
        add(params).then(res=>{
        let data=res
        commit(“addData”,data)//此行是提交mutations
        })
    }
}

8.组件中
    利用辅助函数
        引入辅助函数
        import {mapState,mapMutations,mapActions} from “vuex”

五:效果展示