1,安装: npm i vuex --save
2,导入: import Vuex from 'vuex' //store.js
Vue.use(Vuex)
安装完成后会自动生成store.js
![8d094bf7b143e75a0a5ff730b414abf3.png](https://i-blog.csdnimg.cn/blog_migrate/0aa527d0f4eef5d5182acd07e15cbea6.jpeg)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { //这里面存放的是全局共享的数据
},
mutations: { //用于变更state中的数据
// 注意的时候 在这里不能执行异步操作,比如setTiemout,界面上不会出现什么问题,
就是在vue调试工具中有问题 不能同步到state中的值
},
actions: { //专门处理异步操作变更数据,但只有mutiaonsy定义的函数才有权力修改state中的值
}
})
![4b8fe5a34cd59943cde66a343deb05af.png](https://i-blog.csdnimg.cn/blog_migrate/0739688f7e8dd32765ae2b8b16241e49.jpeg)
vuex mutations 方法调用
![323a3d64df04696946e204d212b07b6f.png](https://i-blog.csdnimg.cn/blog_migrate/5184b3ebc00049478a96f738bf36d2f4.jpeg)
vuex actions 的使用
![e4099b97859f2fe987ee7f27eb0aba38.png](https://i-blog.csdnimg.cn/blog_migrate/d1965bebe7fe052fe6ffac4346af323e.jpeg)
![ddc96f86f3d9fbb3b656996646443bb1.png](https://i-blog.csdnimg.cn/blog_migrate/c89eea0bf443a22b1a19b18964f332a6.png)
![f4505a3facf36de6627d42cbac5968c9.png](https://i-blog.csdnimg.cn/blog_migrate/311708da6c484936ae549f0eac9bf872.jpeg)
第二种 简易方法使用
![50d9688bf47e04f2f4810e24f9057676.png](https://i-blog.csdnimg.cn/blog_migrate/c142727aff109eb1d7077b7d49109ee2.jpeg)
getter 的使用方法
![066f98877a987ea53c8bb962b3ef46a2.png](https://i-blog.csdnimg.cn/blog_migrate/2b62b32641fc95b49b1828e77ed0c02a.jpeg)
![46308415f4a4b750518cfedd724424ac.png](https://i-blog.csdnimg.cn/blog_migrate/361fe03fb962346b45cc9ded7765f389.png)
总结是:state和getter 都是计算属性,所以要放在computed
mutations 却如下:
computed:{
...mapState(["count"]),
...mapGetters(['functionadd'])
},
methods:{
...mapMutations(['add']),
}