vuex怎么使用

概念

vuex其实这个概念在文档中很难准确理解，而它本身就是一个公共的数据仓库，

有什么用?

例如你在登录百度页面时，你的登录状态，

你在百度贴吧页面的登录状态与你在百度百科页面的登录状态实际上是一样的，

这说明你需要一个公共的仓库来存储它，所以vuex基于此实践

怎么用？

第一步 cmd进入到你的项目目录，并且输入命令

cnpm  install vuex --save

注:自动安装到你项目中

第二步 在你的src新建一个store.js文件，并引入vuex

import Vue from 'vue';//这里为固定格式照抄

import Vuex from 'vuex';//这里为固定格式照抄

Vue.use(Vuex);//此为引用Vuex

第三步 设置状态常量

假设

const state={

    num:0

}

注:这里面你可以设置多个值

第四步 你考虑这状态常量能不能被你的a.vue组件或者b.vue组件引用，所以你必须再加一行代码

export default new Vuex.Store({

state

})

第五步你可以建立一个新的模板例如a.vue

代码如下

    

        

{{msg}}

        

---

        

{{$store.state.num}}

    import store from '@/store'

    export default{

        data(){

            return{

                msg:'足球比赛',

            }

        },

        store

    }

注：这里你要特别注意p标签写法，这为固定格式

你可以观察到为0

第六步 我们如果想加入一些方法，我们可以在store.js加入一个 mutations

const mutations={

   jia(state){

        state.count++;//这就代表上面num加加

    },

jian(state){

        state.count--;//同上

    }

}

第七步  在你组件引入方法即可

    +

    -

注:此为固定写法，你只需要把commit里面复制对应的方法名即可，

当你点击加，你会观察到p值开始越变越大，点击减则相反

这里你可以做一个实验，就是再建多个组件例如c.vue.d.vue等等，写入相同代码测试

观察是不是同样结果，这样你就理解公共数据仓库的概念