vuex的主要功能是组件中传值
vuex的基本布置
1.可以在创建项目时勾选vuex或者已创立的项目 npm install vuex --save
2.确保main.js中导入创建的store并且挂载 以及 store下的index导入vuex并且使用vuex插件
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 导入创建的store
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
//一定要挂载
store,
render: h => h(App)
}).$mount('#app')
//store 下的 index
import Vue from 'vue'
//1.导入模块
import Vuex from 'vuex'
//2.使用当前插件
Vue.use(Vuex)
vuex的基本使用-State
路由可以直接使用state（状态）里面的值
1.在store里的index 的state对象里写入要使用的值
export default new Vuex.Store({
state: { //当前的状态
count: 0
},
mutations: { //声明同步的方法
},
actions: { //声明异步的操作
},
modules: {
}
})
2.在所需要的路由里用this.$store.state.count访问所需要的值即可
export default {
computed: {
count() {
return this.$store.state.count
}
}
vuex的基本使用-Mutations、Actions
同步方法中用Mutations更改state里面的值 异步方法用Actions处理后跳转到Mutations
1.触发更改值的方法 （这里用按钮触发count+1 -1操作） +1用mutations -1用actions
<template>
<div class="about">
<h1>This is an about page</h1>
<button @click='decrement'>-1</button>
{{count}}
<button @click='increment'>+1</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
increment() {
//用commit触发mutations中声明的方法
this.$store.commit('increment')
},
decrement() {
//dispatch触发action中声明的方法
this.$store.dispatch('decrement');
},
},
}
</script>
路由中用commit触发mutations中声明的方法，dispatch触发action中声明的方法
2.store下index中 mutations写入对应的方法 参数为state
actions写入对应的方法 参数为｛commit｝ 然后commit到mutations中的方法
mutations: { //声明同步的方法
increment(state){
// 修改状态
state.count++;
},
decrement(state){
state.count--;
}
},
actions: { //声明异步的操作
<!--increment({commit}){-->
<!-- //commit mutations中声明的方法-->
<!-- commit('increment');-->
<!--},-->
decrement({commit}) {
commit('decrement');
}
}
ps:如果异步的方法放在mutations里运行 页面可以得到目标值 但后台存储的值还是之前的值
vuex的辅助函数
(辅助函数最好用在不提交数据的情况下)
vuex的辅助函数包括mapState,mapGetters,mapMutations,mapActions
（拿mapState举例）当声明的变量名跟state中的一致 可以用...mapState(['变量名','变量名'...)来直接获取
变量名不一致可以用...mapState({要用在页面上的自定义名字：state中变量名})
computed: {
// count() {
// return this.$store.state.count;
// },
// username(){
// return this.$store.state.username;
// }
// 声明的变量名跟state中的一致
// ...mapState(['count','username'])
// 变量名不一致
...mapState({
myCount:'count',
user:'username'
}),
// evenOrodd(){
// return this.$store.getters.evenOrodd;
// }
...mapGetters(['evenOrodd'])
}
其余三个辅助函数都是相同的用法
Vuex里的getters更像是一个对state值进行操作的方法
在store里index进行编写
getters(state,getters,rootState)这里的rootState是根state 直接指向store下的index.js
getters:{
evenOrodd(state){
return state.count % 2 === 0 ? '偶数' : '奇数'
}
}
然后在路由中调用
在组件内部提交数据给vuex
1.在触发方法中添加第二个参数
decrement() {
//dispatch触发action中声明的方法
//在组件内部提交数据 载荷形式分发
this.$store.dispatch('decrement',{
amount:10
});
}
2.在（这里是）action里对应的方法中为第二个参数解构，并一同commit给mutations
decrement({commit},{amount}) {
commit('decrement',amount);
}
3.在mutations接收第二个参数 接下来便可以用这个值自由操作
decrement(state,amount){
state.count-=amount;
}
还有第二种写法 在步骤1中
this.$store.dispatch({type:'actions中对应的方法名',要传输的值名：值...})
decrement() {
this.$store.dispatch({
type:'decrement',
amount:10
})
}
vuex-Modules
当项目越来越大时 state、actions等数据也会越来越多 这时候应该用modules来进行模块化处理
1.可以在store建立一个modules文件夹 然后新建js文件
2.对js文件进行编写
3.在store下index中进行import两个
4.在modules中进行挂载
5.在目标页面进行应用
5.1 import要使用的辅助函数
5.2 ...辅助函数('对应的模块名',['对应的方法'])
import {mapGetters} from 'vuex';
export default {
computed:{
...mapGetters('cart',['getCount'])
}
}
