vuex的基本使用
Vuex的x字母表示extension，是“增强”的意思，是vue的插件，也是vue的数据管理容器
官网:https://vuex.vuejs.org/zh/
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
第一步安装相关依赖
npm install --save -dev vuex
然后创建store文件夹，内部创建store.js文件，vuex的store其实就是管理vue的数据仓库
store.js
1 export default{ 2 state:{ 3 a:100 4 }, 5 mutations:{ 6 7 } 8 }
然后在main.js中引入这个store文件和vuex，然后进行相关的注册和使用
1 import Vue from 'vue' 2 // 相对路径引入的App.vue文件 3 import App from './App.vue' 4 // 引入vuex 5 import Vuex from 'vuex' 6 // 引入store文件 7 import store from './store/store.js' 8 // 使用vuex 9 Vue.use(Vuex) 10 11 Vue.config.productionTip = false 12 13 new Vue({ 14 // 渲染节点 15 render: h => h(App), 16 // 挂载store文件 17 store: new Vuex.Store(store) 18 }).$mount('#app')
此时我们就可以在全局使用store文件的状态数据了
App.vue文件
1 <template> 2 <div> 3 {{$store.state.a}} 4 </div> 5 </template>
$store代表的是vue注册的一个$store专门给vuex使用
vue的计数器
我们需要点击按钮进行state的a++
1 methods: { 2 add() { 3 this.$store.state.a++ 4 } 5 }
不要写类似于上面的代码，因为这种代码是某一个文件修改的，这样违背了vuex的初衷，可预测，或者可维护性会特别的差
我们必须通过$store.commit进行修改，不能直接修改参数
我们在App.vue中进行对state的a++
1 <template> 2 <div> 3 {{$store.state.a}} 4 <button @click="add">加一</button> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 methods:{ 11 add(){ 12 this.$store.commit("add") 13 } 14 } 15 } 16 </script> 17 18 <style lang="scss" scoped> 19 20 </style>
commit内部的参数是mutations罗列的事件参数
store.js
1 export default{ 2 state:{ 3 a:100 4 }, 5 mutations:{ 6 add(state){ 7 state.a++ 8 } 9 } 10 }
add内部的state参数是当前的state对象的内容，所以如果对当前的state进行加1，全局的state也就会随之加1
我们也可以在commit中传参数，比如我们想点击加
1 methods: { 2 add() { 3 this.$store.commit("add", 5) 4 } 5 }
1 mutations:{ 2 add(state,val){ 3 state.a+=val 4 } 5 }
但是如果我们想传入多个参数，就必须以对象的形式传入
1 add() { 2 this.$store.commit("add", { 3 a: 2, 4 b: 4 5 }) 6 }
store.js
1 mutations:{ 2 add(state,val1){ 3 console.log(val1.a) 4 state.a+=val1.a 5 } 6 }
