先通过vue-cli快速搭建项目,再通过npm install 安装vue运行安装包的依赖。
在通过npm install vuex -save安装vuex,安装成功后在src里面创建state文件夹在里面创建store.js文件。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 1// 存放组件之间共享的数据 }, mutations: { increase (state) { state.count++ }, jianshao (state) { state.count-- } }, actions: { addjia ({commit}) { commit('increase') }, addjian ({commit}) { commit('jianshao') } } }) export default store /** * mutations改变state里面的状态也就是值 * actions里面的相当于commit触发的一个方法,将mutations里面的increase方法放到commit里面在组件中调用 * * */
在main.js里面注册;
import Vue from 'vue' import App from './App' import router from './router' import Vuex from 'vuex' import store from './store/store.js' Vue.config.productionTip = false Vue.use(Vuex) new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
然后在自己创建一个vue文件,
html添加两个按钮;
<span>{{count}}</span> <button @click="add">增加数值</button> <button @click="addjian">减少数值</button>
js里面写;
<script> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App' } }, computed: { count () { return this.$store.state.count } }, methods: { add () { this.$store.dispatch('addjia') }, addjian () { this.$store.dispatch('addjian') } } } /** * computed里面调用count起到显示的作用 * methods里面调用绑定的点击事件再通过this.$store.dispatch('addjia')调用store.js文件里面addjia方法通过里面的commit触发increase * */ </script>
然后运行就可以实现简单的加减